有没有一种方法或方法可以指定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类的元素中。
这将适用于遵循该层次结构的任何东西,但请记住,它不必直接遵循该层次结构。另一种说法是,在somethingrandom之间仍然可以有一个rich-text类,红色文本仍然可以工作。
如果您希望它是一个严格的层次结构,那么您可以简单地使用>这意味着它必须直接遵循给定的匹配。
.rich-text > .random > .inner {
    color: red;
}

只有当inner类在random内且必须遵循该层次结构且不能在两者之间有任何其他内容时,才会应用红色文本颜色。

10-05 20:42
查看更多