css - 为什么 css 选择器 - 'begins with' 不允许在结尾使用双破折号？

Question

在编写 CSS 时，我使用 BEM 方法，并且我发现使用 CSS 选择器“开始于” -[class^="classname"]非常有用。在声明修饰符的样式时尤其如此，即.block__element--modifier.

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

我查看了CSS Selectors Level 3 规范，但看不到任何关于双破折号会失败的原因。

score 3 · Accepted Answer

我认为这不会给您带来任何问题，因为我刚刚使用下面的标记进行了测试，并且效果很好......

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

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

此外，这^=意味着class名称以上述字符串开头，否则将导致您的选择器失败，您可能希望使用*=它来搜索子字符串。

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

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

将使您的选择器失败Demo，因此在这种情况下您可能喜欢使用

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

1 回答 1