具有封闭类特异性的相邻同级选择器

我有这个 DOM：

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

我想要这个 css 规则：

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

但仅限于类a

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

.a .b + .a .c {}

有谁知道这是否可能？

请改用此选择器：

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

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

演示。

现在是解释部分。如 CSS 规范中所定义，每个带有+符号的选择器都被视为选择器链：

由单个简单选择器组成的选择器匹配任何元素满足其要求。在简单选择器和前面加上链的合并器施加了额外的匹配约束，因此选择器的主题始终是元素匹配的子集最后一个简单选择器。

现在分析一下你开始的表达式：

.a .b + .a .c

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

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

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

此

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

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

但是，在您的情况下，您不必检查.c祖先 - 只需检查.b（其前面的兄弟姐妹）就足够了。如果.b .a了它的 DOM 树，它的兄弟姐妹肯定也有它。)

相关内容