CSS组合子优先?

时间:2010-10-03 21:18:41

标签: css css-selectors

这样的组合符是否优先
a > b ~ c d

(注意cd之间的空格是后代组合子)

或者只是从左到右阅读,比如

((a > b) ~ c) d

3 个答案:

答案 0 :(得分:50)

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

任何复杂的选择器都可以在任何对你有意义的方向上读取,但这并不意味着组合器是distributivecommutative,因为它们indicate a relationship between two elements,例如ancestor descendantprevious + next)。这就是元素顺序重要的原因。

然而,

According to Google,浏览器会实现其选择器引擎,以便从右到左评估复杂的选择器

  

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

Mozilla的文章Writing Efficient CSS for use in the Mozilla UI有一节描述了他们的CSS引擎如何评估选择器。这是特定于XUL的,但同样的布局引擎用于Firefox的UI和在Firefox的视口中显示的页面。

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

  

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

请记住两件事:

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

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


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

所以,选择器:

a > b ~ c d

意味着:

  

选择任何d元素
  这是c元素的后代
  这是一个b元素的兄弟姐妹   这是a元素的子(直接后裔)。

答案 1 :(得分:2)

没关系。

a > b c 

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

(a > b) c

a > (b c)

我认为浏览器从右到左。

答案 2 :(得分:-5)

the spec没有提及任何关于优先权的事情(我能找到),但我认为这是严格的左右评估