我有以下标记:
<div class="class-XXX">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
为简单起见,假设 class-XXX
只能具有值 class-1
、class-2
、class -3
和 class-4
。
我想将规则 color: #fff;
应用到 class-5
的每个子级,而不是 class-1
的子级。这是我的样式表的一部分:
.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
color: #fff;
}
这行不通,我也不确定为什么。我也不认为规则会被覆盖。
更新
正如 AndrewBone 所指出的,该规则似乎适用于一个最小的示例。我现在知道出了什么问题,但我不知道如何解决:
另一个 CSS 文件中的 h1
应用了一条规则(无法删除),并且该规则的优先级高于我编写的规则。我该如何解决这个问题?
这里是 an example JSFiddle .
解决方案
Vucko 指出 h1
类型选择器具有更高的优先级,因此不会应用该规则。因此,为了避免列出所有可能的组合,应该使用 *
选择器!
最终结果:
.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
color: #fff;
}
感谢 Paulie_D 和 David Wilkinson 教我关于 :not
伪选择器的知识。
最佳答案
这样就可以了..
[class^="class-"]:not(.class-1) .class-5 {
*/ your styles here */
}
...但这仅适用于上述类名中的特定方法。
[class^="class-"]:not(.class-1) .class-5 {
color: red;
}
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
关于css - 将 CSS 规则应用于子类中的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34676903/