为什么css选择器 - '开头为'allow double-dash at end？ [英] Why doesn't css selector - 'begins with' allow double-dash at end?

问题描述

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

In writing CSS I use BEM methodology and I've found using the CSS selector 'begins with' - [class^="classname"] very useful. This is especially true when declaring styles for modifiers, i.e. .block__element--modifier.

我想使用 [class ^ =block__element - ] 来定位特定元素，而不考虑它们的修饰符。但是，我注意到选择器未能定位元素的结尾处的双破折号。

Therefore when writing CSS rules I would like to use [class^="block__element--"] to target specific elements regardless of their modifier. However, I've noticed the double-dash at the end of the selector fails to target the elements. A single dash however will work.

我已经看过了 CSS选择器Level 3 spec ，但是看不到任何提到为什么双破折号会失败。

I've had a look through the CSS Selectors Level 3 spec but cannot see any mention of why the double-dash would fail.

推荐答案

我不认为这会导致你的任何问题，因为我只是测试与下面的标记，它的工作原理...

I don't think that should cause you any problem as I just tested with the markup below and it works well...

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

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

演示

> ^ = 意味着类名称以上述字符串开头，失败将导致选择器失败，您可能希望使用 * = 而不是搜索一个子字符串。

Also, this ^= means that the class name begins with the above string, failing that will result in failure of your selector as well, you may like to use *= instead which searches for a substring.

所以如果你有一个 之前声明如

So if you have a class declared before say like

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

将会失败您的选择器 演示 ，因此在这种情况下，您可能需要使用

Will fail your selector Demo, so in this case you may like using

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

演示2

这篇关于为什么css选择器 - '开头为'allow double-dash at end？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！