我有这个 DOM：
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
我想要这个css规则：
.b + .c { margin-left: 220px; }
但只在课堂上a
我希望这样的事情会奏效，但没有运气。
.a .b + .a .c {}
有谁知道这是否可能？
问问题
326 次
1 回答
9
请改用此选择器：
.a .b + .c {
margin-left: 220px;
}
...或者.a > .b + .c，如果您希望规则仅适用于.a容器的子代，而不是其所有后代。
演示。
现在解释部分。正如CSS 规范中定义的那样，每个带有+符号的选择器都被视为选择器链：
由单个简单选择器组成的选择器匹配任何满足其要求的元素。将简单选择器和组合器附加到链中会施加额外的匹配约束，因此选择器的主题始终是匹配最后一个简单选择器的元素的子集。
现在分析您开始使用的表达式：
.a .b + .a .c
根据规范，这实际上被视为......
((.a .b) + .a) .c
换句话说，选择器被应用...
- 对所有
.c元素，其中... - ......有
.a元素作为他们的祖先，这...... - ......有
.b元素作为他们的前兄弟，其中...... - .......... 有
.a元素作为他们的祖先。
此选择器将匹配.c此 HTML 中的元素：
<div class="a">
<div class="b"></div>
<div class="a">
<div class="c">This is matched</div>
</div>
</div>
但是，在您的情况下，您不必检查.c祖先 - 仅检查.b（其前一个兄弟姐妹）就足够了。如果.b有.a它的 DOM 树，它的兄弟肯定也有它。)
于 2013-10-31T22:31:39.740 回答