这个选择器是怎么调用的？ [复制]

Question

我刚刚发现了这种选择器。我觉得这是巫术！

你在 css 中加入了两个简单的选择器来组合它们。

.One {color: red;}
.Two {color: blue}
.One.Two {color: orange;}

<h2 class="One">One</h2>
<h2 class="Two">Two</h2>
<h2 class="One Two">One Two</h2>

合并选择器？组合选择器？摇晃，不搅拌？

我希望看到跨不同浏览器的支持。

---

我正在为那个不喜欢我原来的问题的人编辑。

此选择器出现在 CSS 3 规范的示例中：https://www.w3.org/TR/css3-selectors/#class-html，但它没有名称。它没有出现在总表上：https://www.w3.org/TR/css3-selectors/#selectors

我在想它是否有一些名字，比如“and”选择器、“adjacent”选择器之类的。例如在http://caniuse.com/ 中寻找兼容性时，需要更具体。

我正在做例如测试更改顺序，.Two.One 与 .One.Two 通过反复试验。一个特定的文档会很方便。

Answer 1

3 级选择器将其称为 sequence of simple selectors：

一个简单选择器序列是一个simple selectors链，它们没有被combinator分隔。

在这种情况下，简单的选择器是 class selectors .One 和 .Two。

.One.Two 也是一个 selector 仅由该简单选择器序列形成。

选择器是一个或多个sequences of simple selectors的链，由combinators分隔。

.One.Two 也是仅由该选择器形成的 group of selectors。

以逗号分隔的选择器列表表示列表中每个单独选择器选择的所有元素的联合。

在一系列简单的选择器中，顺序无关紧要：

由单个简单选择器序列组成的选择器代表任何满足其要求的元素。

所以.Two.One 和.One.Two 是等价的。

Answer 2

.One.Two {color: orange;}

这意味着类将一个接一个地同时具有第一类和第二类。

这是选择器的组合

这里的重点是，您可以通过将这些选择器串在一起而不使用空格来定位具有类和 ID 组合的元素。