CSS 选择器中 + 运算符的优先级是什么？答案

【问题标题】：What's the precedence of the + operator in CSS selectors?CSS 选择器中 + 运算符的优先级是什么？
【发布时间】：2011-12-29 11:00:47
【问题描述】：

From the CSS selector spec:

E + F 匹配任何紧跟在同级元素 E 之前的 F 元素。

运算符优先级呢？ #id1 #id2 + #id3 匹配什么？ #id1 + #id2 #id3?呢？

是否有表示#id1 (#id2 + #id3) 或(#id1 + #id2) #id3 的选择器？（我假设 ( 和 ) 在 CSS 选择器中是不允许的，我在规范中没有看到它们）

【问题讨论】：

#id1 (#id2 + #id3) 和 (#id1 #id2) + #id3 之间有什么区别？
@BoltClock - 没错，没有区别。
@BoltClock 另一方面，给定一个像#id1 #id2 + #id3 #id4 这样的（相当混乱的）选择器，优先级确实很重要；这个问题中给出的例子可能很糟糕，但问题的核心仍然是好的。
@Mark Amery：所以当你有不少于两个后代组合子时，这很重要。是的，这是一个更好的例子。

标签： css css-selectors

【解决方案1】：

浏览器以线性方式从右到左读取每个简单选择器和组合器序列。组合器不会以任何方式影响排序。在最后一个组合符（如果有）之后，最右边的选择器称为 key 选择器（有关更多信息，请参阅下面的参考链接），它标识了规则适用的元素（也称为 subject，虽然请注意，键选择器可能并不总是代表选择器的主题，因为不同的应用程序实现选择器的方式不同）。

选择器#id1 #id2 + #id3 表示

选择元素#id3
如果它直接作为#id2的兄弟姐妹跟随@
那是#id1的后代。

#id3 匹配选择器的 DOM 结构如下所示：

#id1
  ... any level of nesting
    #id2
    #id3

而#id1 + #id2 #id3 表示

选择元素#id3
如果它是#id2的后代
直接作为#id1的兄弟。

#id3 匹配选择器的 DOM 结构如下所示：

#id1
#id2
  ... any level of nesting
    #id3

注意这个DOM结构中元素#id2的位置与上面的不同。

这里没有太多优先级问题，因为后代和兄弟组合子在 DOM 中的方向不同。两个选择器序列从右到左读取。