CSS组合器优先级？

CSS组合器优先级？

不，在组合器中没有优先级的概念。但是，在复杂的选择器中存在元素顺序的概念。

可以从对您有意义的任何方向读取任何复杂的选择器，但这并不意味着组合器是分布式的或可交换的，因为它们表示两个元素（例如

ancestordescendant

和）之间的关系

previous +next

。这就是为什么元素顺序很重要的原因。

但是，根据Google的说法，浏览器实现了其选择器引擎，因此它们 从右到左
评估复杂的选择器：

引擎[Gecko]从最右边的选择器（称为“键”）开始，从右到左评估每个规则，并遍历每个选择器，直到找到匹配项或放弃该规则。

Mozilla的文章“ 编写可在MozillaUI中使用的高效CSS”的一节描述了其CSS引擎如何评估选择器。这是特定于XUL的，但是Firefox的UI和Firefox视口中显示的页面使用相同的布局引擎。

如Google在上面的引文中所述， 键选择器 只是指最右边的简单选择器序列，因此它也是 从右到左 ：

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

请记住两件事：

• 这些是根据 实现细节记录的 ; 从本质上讲，选择器就是选择器，它要做的就是匹配一个满足特定条件的元素（由选择器的组件布置）。从哪个方向读取取决于实现。正如另一个答案所指出的，规范没有说明在组合器优先级中或组合器优先级中评估选择器的顺序。

• 这两篇文章都没有暗示每个简单选择器都 在其简单选择器序列中 从左到右进行求值（有关为什么我认为 并非 如此。文章的意思是，浏览器引擎将评估键选择器序列，以找出其工作的DOM元素是否与之​​匹配，如果匹配，则 通过跟随组合器 并 进入 与之匹配的任何元素，检查 下一个选择器序列 顺序，然后冲洗并重复直到完成或失败。

---

话虽如此，如果您要我阅读选择器并用简单的英语描述他们选择的内容，我也会从右到左阅读它们（不是我确定这是否与实现细节有关！）。

因此，选择器：

a > b ~ c d

表示：

选择作为

d

元素的后代的任何元素，该

c

元素 是该

b

元素 的子代（直接后代），并

a

紧随该元素。