CSS组合优先?

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

任何复杂的选择器都可以在任何对您有意义的方向上读取,但这并不意味着组合符是正确的 distributive 或 commutative indicate a relationship between two elements ,例如。 ancestor descendant 和 previous + next . 这就是为什么元素的顺序才是最重要的。

According to Google 然而,浏览器实现了它们的选择器引擎,以便它们评估复杂的选择器 :

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

Writing Efficient CSS for use in the Mozilla UI 有一个部分描述他们的CSS引擎如何评估选择器。这是特定于XUL的,但是相同的布局引擎用于Firefox的UI和在Firefox的视口中显示的页面。 (死链接)

正如谷歌在上述引文中所描述的那样 钥匙选择器 :

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

• 这些记录基于 实施细则 ;本质上,选择器就是一个选择器,它所要做的只是匹配满足特定条件的元素(由选择器的组件列出)。阅读的方向取决于实施;另一个答案指出, the spec

• 这两篇文章都不意味着每个简单的选择器都是从左到右计算的 在其简单的选择器序列中 this answer 不是吗 案例)。文章所说的是,浏览器引擎将评估键选择器序列,以确定其工作DOM元素是否与之匹配,然后如果匹配, 跟随组合器进入下一个选择器序列 并检查是否有符合该顺序的元素,然后冲洗并重复,直到完成或失败。

话虽如此,如果你要我阅读选择器并用简单的英语描述它们选择了什么,我也会从右到左阅读它们(但我不确定这是否与实现细节有关!)。

所以,选择器:

a > b ~ c d

意味着:

选择任意 d 要素
c
这是一个兄弟姐妹,并随后,一个 b 要素
那是一个家庭的孩子(直系后裔) a

没关系。

a > b c 

将匹配相同的元素,无论您是否这样做

(a > b) c

a > (b c)

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

the spec 没有提到任何关于优先级的东西(我可以找到),但我相信这是严格的从左到右的评估