CSS选择器优先级组合？

Question

CSS选择器优先级组合？

52

像这样的组合器是否有优先级？

a > b ~ c d

(Note the space between c and d is the descendant combinator)

或者仅按从左到右的顺序阅读，例如

((a > b) ~ c) d

?

- mpen

3个回答

2

没关系。

a > b c

无论您是如何进行匹配，都将匹配相同的元素

(a > b) c

或者

a > (b c)

我认为浏览器是从右到左的。

- Šime Vidas

如果你像OP的例子一样加入兄弟组合器，那就很重要了。 - Jacques Gaudin

-7

规范没有提到优先级（我没找到），但我相信它是严格从左到右评估的。

- Scott Evernden

是的，我在规格里也没找到任何东西，所以才问的 :) - mpen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

在组合器中，没有优先级的概念。然而，复杂选择器中元素的顺序是有意义的。

可以按照任何有意义的方向阅读任何复杂选择器，但这并不意味着组合器是分配律或交换律，因为它们表示两个元素之间的关系，例如祖先后代和前一个 + 下一个。这就是为什么元素的顺序很重要。

根据谷歌的说法，浏览器实现他们的选择器引擎使其从右到左评估复杂选择器：

引擎[Gecko]从右到左评估每个规则，从最右边的选择器（称为"键"）开始，并通过每个选择器移动，直到找到匹配项或丢弃规则。

Mozilla的文章，编写在Mozilla UI中使用的有效CSS，有一节描述他们的CSS引擎如何评估选择器。这是XUL特定的，但是相同的布局引擎用于Firefox的UI和显示在Firefox视口中的页面。 (链接已失效)

正如Google在上述引用中所描述的那样，关键选择器仅是指最右边的简单选择器序列，因此再次从右到左：

样式系统通过从关键选择器开始，然后向左移动（查找规则选择器中的任何祖先）来匹配规则。只要选择器的子树继续检查，样式系统就会继续向左移动，直到它匹配规则或由于不匹配而放弃。

请记住两件事：

这些是基于实现细节的文档; 实际上，选择器只是用来匹配符合特定条件（由选择器的组件确定）的元素。它的阅读方向取决于实现方式；正如另一个答案所指出的那样，规范并没有说明在何种顺序下评估选择器或关系符优先级。

两篇文章都没有暗示每个简单选择器是否按从左到右的顺序进行评估 在其简单选择器序列内（请参见此答案以了解我为什么认为这不是情况）。这些文章表达的意思是，浏览器引擎将评估关键选择器序列，以确定其工作DOM元素是否与之匹配，然后如果匹配，通过跟随组合器进入下一个选择器序列并检查是否有任何匹配该序列的元素，然后反复执行，直到完成或失败。

说了这么多，如果你让我阅读选择器并用简单的英语描述它们选择什么，我也会从右向左阅读（虽然我不确定这是否与实现细节相关！）。

因此，选择器是：

a > b ~ c d

意思是：

选择任何一个 d 元素，
它是一个 c 元素的后代，
这个 c 元素是一个 b 元素的兄弟元素，并且在 b 元素之后出现，
而这个 b 元素是一个 a 元素的直接子元素。