CSS 相邻选择器/含义答案

【问题标题】：CSS Adjacent Selector / MeaningCSS 相邻选择器/含义
【发布时间】：2011-10-16 17:53:18
【问题描述】：

下面的选择器是什么意思？

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

预期含义（以及它似乎起作用的方式）：在c 中选择与b 相邻的d 在a 中

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

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

【问题讨论】：

w3.org/TR/CSS21/selector.html#adjacent-selectors

标签： css-selectors css

【解决方案1】：

在.c 中选择与.b 相邻的.d 在.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 详细说明。（当您在括号中思考时，这可能是违反直觉的；要理解它，只需将括号视为最外面的括号在前。不过，任何一种排序都可以，只要您记住组合子不是关联的。参见有关详细信息的链接答案。）

【讨论】：

你是对的！我已经删除了我的答案。感谢您的澄清。
记住brackets/parentheses aren't actually valid selector operators;为了清楚起见，它们在问题和答案中使用。
@Jason Gennaro：没问题；这个想法是您按顺序一步一步地处理选择器。
我是从左到右而不是从右到左阅读。
@Jason 我没有看到你的答案，但感谢你的尝试！