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>

未选中
此p.d元素未包含在类c的元素中。
<强>选择的
此p.d元素包含在.c元素中。 .c元素紧跟在.b元素后面，并且这两个元素共享.a祖先元素。
未选中
此p.d元素包含在.c元素中。但是，这不会立即跟随.b元素;相反，它来自另一个.c元素，因此其p.d不满足选择器。

如果使用一般同级组合子~而不是相邻的兄弟组合子+，如
```
.a .b ~ .c .d
```
然后匹配此p.d。

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

序列中的所有复合选择器和组合子都是从右到左处理，使用每个选择器组作为步骤。 This answer详细说明。（当你在括号中思考时，这可能是违反直觉的;理解它只是将括号视为最外面的括号。但是，只要你记得组合符不是关联的，那么任何一个排序都很好。详细链接的答案。）

CSS相邻选择器/含义

1 个答案: