如果value包含hash#sign,则CSS属性值选择器不起作用

Question

我使用带有自定义HTML5属性的bootstrap LIKE下拉菜单data-作为前缀,其值从一开始#,现在由于某种原因我无法改变它.

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

现在的问题是使用PHP的动态方法,所以元素的子元素经常更改所以我没有使用nth-child如此想法使用attribute-value选择器但CSS不接受如果值包含#.有没有解决方法呢？

<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;
}

演示

Answer 1

使用引号:

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

DEMO

为什么必须引用它？因为#在CSS中有特殊意义.引用它隐藏了这种特殊含义.同样的效果可以用接洽":[data-demo="#does_work"]或转义#用\:[data-demo=\#does_work]