Question

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

这是script link（就像这个<a href="#" data-dropdown="#dropdown-1">dropdown</a>）

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

CSS

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

Answer 1

使用引号：

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

为什么必须引用它？因为#在CSS中具有特殊含义。引用它隐藏了这种特殊含义。可以使用"： [data-demo="#does_work"] 或通过#转义\来解决相同的效果： [data-demo=\#does_work]

Answer 2

将值包含在引号"

中

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