CSS相邻选择器/含义

Question

以下选择器是什么意思？

.a .b + .c .d { ... }

意图(以及它似乎起作用的方式):选择与d内部c相邻的b内部a

/* Brackets to hide ambiguity */
(.a .b + .c) .d

这是正确使用邻接兄弟选择器吗？+CSS语法中的运算符优先级是什么？

Answer 1

选择与.d内部.c相邻的.b内部.a

恩,那就对了.放置括号的方式对我来说也很有意义.将它们嵌套一些以使其更清晰:

(((.a) .b) + .c) .d

在此示例中,仅p.d匹配第二个元素:

<div class="a">
  <div class="b">
    <p class="d"></p> <!-- [1] -->
  </div>
  <div class="c">
    <p class="d"></p> <!-- [2] -->
  </div> 
  <div class="c">
    <p class="d"></p> <!-- [3] -->
  </div>
</div>

1. 未选中
   此p.d元素不包含在具有该类的元素中c.

2. Selected
   此p.d元素包含在.c元素中.该.c元素紧跟一个.b元素,而这两个共享.a祖先元素.

3. 未选中
   此p.d元素包含在.c元素中.但是,这并不是一个.b元素; 相反,它来自另一个.c元素,因此它p.d不满足选择器.

   如果使用一般兄弟组合~器而不是相邻的兄弟组合器+,如

   .a .b ~ .c .d
   

   然后这p.d将匹配.

+CSS语法中的运算符优先级是什么？

序列中的所有复合选择器和组合器都是从右到左处理,使用每个选择器组作为步骤.这个答案详述.(当你在括号中思考时,这可能是违反直觉的;理解它只是将括号视为最外面的括号.但是,只要你记得组合符不是关联的,那么任何一个订单都可以.详细链接的答案.)