CSS组合子优先？

Question

是否优先考虑组合者

a > b ~ c d

(注之间的空间c,并d为后代组合子)

或者只是从左到右阅读,就像

((a > b) ~ c) d

？

Answer 1

不,组合者没有优先权概念.但是,复杂选择器中存在元素顺序的概念.

任何复杂的选择器都可以在任何对你有意义的方向上读取,但这并不意味着组合器是分布式的或可交换的,因为它们表示两个元素之间的关系,例如ancestor descendant和previous + next).这就是元素顺序重要的原因.

然而,据Google称,浏览器实现了他们的选择器引擎,以便从右到左评估复杂的选择器:

引擎[Gecko]从右到左评估每个规则,从最右边的选择器(称为"密钥")开始并移动每个选择器直到找到匹配或丢弃规则.

Mozilla的文章,编写用于Mozilla UI的高效CSS有一节描述了他们的CSS引擎如何评估选择器.这是特定于XUL的,但同样的布局引擎用于Firefox的UI和在Firefox的视口中显示的页面.

正如Google在上面引用中所描述的那样,键选择器只是指向最右边的简单选择器序列,所以它也是从右到左:

样式系统通过从键选择器开始匹配规则,然后向左移动(查找规则选择器中的任何祖先).只要选择器的子树继续检出,样式系统就会继续向左移动,直到它与规则匹配,或者由于不匹配而放弃.

请记住两件事:

• 这些是根据实施细节记录的 ; 从本质上讲,选择器是一个选择器,它所要做的就是匹配满足某个条件的元素(由选择器的组件布局).它的读取方向取决于实现方式; 正如另一个答案所指出的那样,该规范没有说明在组合器优先级中评估选择器的顺序是什么.

• 这两篇文章都没有暗示每个简单选择器在其简单的选择器序列中从左到右进行评估(请参阅此答案,了解为什么我认为不是这种情况).文章所说的是浏览器引擎将评估键选择器序列以确定其工作DOM元素是否与其匹配,然后如果匹配,则通过跟随组合器进入下一个选择器序列并检查与之匹配的任何元素.然后冲洗并重复直至完成或失败.

尽管如此,如果你要求我阅读选择器并用简单的英语描述他们选择的内容,我也会从右到左阅读它们(不过我确定这是否与实现细节有关!).

所以,选择器:

a > b ~ c d

意思是:

选择 作为元素后代的任何d元素
,该元素是元素的后代, 后面是元素 的子元素(直接后代).c
b
a