为什么没有css选择器 - '以'结尾'允许双击？

Question

在编写CSS时，我使用BEM方法，我发现使用CSS选择器＆＃39;以＆＃39;开头。 - [class^="classname"]非常有用。在为修饰符声明样式时尤其如此，即.block__element--modifier。

因此，在编写CSS规则时，我想使用[class^="block__element--"]来定位特定元素，而不管它们的修饰符。但是，我注意到选择器末尾的双破折号无法定位元素。然而，单个破折号将起作用。

我已经浏览了CSS Selectors Level 3 spec，但看不出任何提及为什么双击会失败。

Answer 1

我不认为这会导致您遇到任何问题，因为我刚刚使用下面的标记进行测试并且运行良好...

<div class="block__element--modifier">Hello</div>

div[class^="block__element--"] {
    color: red;
}

Demo

另外，这个^=表示class名称以上面的字符串开头，如果失败也会导致选择器失败，您可能希望使用*=代替搜索子字符串。

因此，如果您之前声明了class，请说

<div class="hello block__element--modifier">Hello</div>

你的选择器 Demo 会失败，所以在这种情况下你可能会喜欢使用

div[class*="block__element--"] {
    color: red;
}

Demo 2