css - 如果值包含井号 # 符号，则 CSS 属性值选择器不起作用

Question

我正在使用带有自定义 HTML5 属性的 bootstrap LIKE 下拉菜单，data-其前缀是从开始的值#，现在由于某种原因我无法更改它。

这是脚本链接（就像这样<a href="#" data-dropdown="#dropdown-1">dropdown</a>）

现在的问题是使用 PHP 使用动态方法，因此元素的子元素经常更改，所以我没有使用nth-child这么想的使用attribute-value选择器，但 CSS 不接受 if value contains #。有什么解决方法吗？

<div data-demo="works">This works</div>
<br />
<div data-demo="#doesnt_works">This fails</div>

CSS

div[data-demo=works] {
    color: red;
}

div[data-demo=#doesnt_works] {
    color: green;
}

score 7 · Accepted Answer

使用引号：

div[data-demo='#does_work'] {
    color: green;
}

为什么一定要引用？因为#在 CSS 中有特殊的含义。引用它隐藏了这种特殊含义。可以使用:"或[data-demo="#does_work"]转义:来达到相同的效果#\[data-demo=\#does_work]

score 4 · Accepted Answer

将值括在引号中"

div[data-demo="#doesnt_works"] {
    color: green;
}

2 回答 2