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

Question

从CSS选择器规范:

E + F匹配紧跟在兄弟元素E之前的任何F元素.

运营商优先级怎么样？是什么#id1 #id2 + #id3比赛？关于什么#id1 + #id2 #id3?

是否有这意味着选择#id1 (#id2 + #id3)或(#id1 + #id2) #id3？(我假设(并且)在CSS选择器中不被允许,我在规范中没有看到它们)

Answer 1

浏览器从右到左以线性方式读取简单选择器和组合器的每个序列.组合器不会以任何方式影响排序.最后一个组合器(如果有的话)之后的最右边的选择器被称为键选择器(请参阅下面的参考链接了解更多信息),并标识规则适用的元素(也称为选择器的主题,但请注意,键选择器可能并不总是表示选择器的主题,因为不同的应用程序以不同的方式实现选择器.

选择器#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

注意与#id2上面的那个相比,这个DOM结构中元素位置的差异.

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

相关答案:

• CSS组合子优先？
• CSS选择器中是否允许使用括号？
• CSS相邻选择器/含义