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

时间:2011-11-15 11:30:55

标签: css css-selectors

From the CSS selector spec

  

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

运营商优先级怎么样? #id1 #id2 + #id3匹配什么? 那么#id1 + #id2 #id3?

是否有选择器表示#id1 (#id2 + #id3)(#id1 + #id2) #id3? (我假设()在CSS选择器中不被允许,我在规范中没有看到它们。

1 个答案:

答案 0 :(得分:44)

浏览器从右到左以线性方式读取每个简单选择器和组合器序列。组合器不会以任何方式影响排序。最后一个组合器(如果有的话)之后的最右边的选择器称为键选择器(有关更多信息,请参阅下面的参考链接),并标识规则适用的元素(也称为<选择器的em> 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中的方向不同。两个选择器序列从右到左读取。

相关答案: