css - 具有封闭类特异性的相邻兄弟选择器

Question

我有这个 DOM:

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

我想要这个 css 规则:

.b + .c { margin-left: 220px; }

但仅限于类 a

我希望这样的事情会奏效，但运气不好。

.a .b + .a .c {}

有谁知道这是否可能？

Answer 1

改用这个选择器:

.a .b + .c {
    margin-left: 220px;
}

... 或 .a > .b + .c，如果您希望规则仅应用于 .a 容器的子容器，而不是应用于它的所有后代。

Demo .

现在进行解释部分。如 CSS spec 中所定义，每个带有 + 符号的选择器都被视为选择器链:

A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

现在分析您开始使用的表达式:

.a .b + .a .c

根据规范，这实际上被视为...

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

换句话说，选择器被应用...

• 所有的 .c 元素，它...
• ... 有 .a 元素作为它们的祖先，它们...
• ...... 有 .b 元素作为它们前面的 sibling ，它们......
• .............有 .a 元素作为他们的祖先。

此选择器将匹配此 HTML 中的 .c 元素:

<div class="a">
  <div class="b"></div>
  <div class="a">
    <div class="c">This is matched</div>
  </div>
</div>

但是，在您的情况下，您不必检查 .c 祖先 - 仅检查 .b(它的前一个兄弟)就足够了。如果 .b 在其 DOM 树中有 .a，那么它的 sibling 肯定也有。 )