有没有一种方法或方法可以指定css类,使其只影响某些嵌套元素?在这个例子中,我们假设.rich text类有一些css规则。我想实现的是,它适用于除.inner div和它的所有后代之外的div中的所有内容。
<div class="rich-text">
<div class="random">
<div class="inner">
The rich-text class should not effect this or anything in it
</div>
<p>Some text...</p>
</div>
</div>
编辑:我看到有一些答案试图给出这个精确示例代码的解决方案。我需要一个通用的解决方案,不管内部类在哪里(它可能是2或20层深等等…)。
最佳答案
您只需将索引类名写在根之后。
例如,在您的例子中,您希望inner
类只应用于random
它必须在rich-text
内。
.rich-text .random .inner {
color: red;
}
红色文本颜色将只应用于应用了
inner
类的任何元素,该元素必须在具有random
类的元素中,该元素必须在具有rich-text
类的元素中。这将适用于遵循该层次结构的任何东西,但请记住,它不必直接遵循该层次结构。另一种说法是,在
something
和random
之间仍然可以有一个rich-text
类,红色文本仍然可以工作。如果您希望它是一个严格的层次结构,那么您可以简单地使用
>
这意味着它必须直接遵循给定的匹配。.rich-text > .random > .inner {
color: red;
}
只有当
inner
类在random
内且必须遵循该层次结构且不能在两者之间有任何其他内容时,才会应用红色文本颜色。