我有这个DOM:
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
我想要这个css规则:
.b + .c { margin-left: 220px; }
但仅限于班级a
我希望像这样的东西会起作用,但没有运气。
.a .b + .a .c {}
有人知道这是否可行?
答案 0 :(得分:9)
请改用此选择器:
.a .b + .c {
margin-left: 220px;
}
...或.a > .b + .c
,如果您希望规则仅应用于.a
容器的子容器,而不是应用于其所有后代。
现在解释部分。根据{{3}}中的定义,每个带有+
符号的选择器都被视为选择器链:
由单个简单选择器组成的选择器匹配任何元素 满足其要求。预先设置一个简单的选择器和 组合链到一个链上会产生额外的匹配约束,所以 选择器的主题总是匹配的元素的子集 最后一个简单的选择器。
现在分析你开始使用的表达式:
.a .b + .a .c
根据规范,这实际上被视为......
((.a .b) + .a) .c
换句话说,应用了选择器......
.c
元素,其中...... .a
个元素作为他们的祖先,其中...... .b
个元素作为他们的先前兄弟姐妹,其中...... .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
,那么兄弟肯定也有。 )