html - 如何禁用 CSS 类对嵌套元素的影响？

Question

有没有一种方法或变通方法可以指定一个 CSS 类，使其只影响某些嵌套元素？在这个例子中，我们假设 .rich-text 类有一些 CSS 规则。我想实现它适用于该 div 内的所有内容，除了 .inner 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 层深等等......)都可以工作。

Answer 1

你可以简单地在根后面写上索引类名。

例如，在您的情况下，您希望 inner 类仅适用于 random，它必须位于 rich-text 中。

.rich-text .random .inner {
    color: red;
}

红色文本颜色仅适用于应用了 inner 类的任何元素，该类必须位于具有 random 类的元素内，该类必须位于元素内使用 rich-text 类。

这适用于遵循该层次结构的任何事物，但请记住，它不必直接遵循它。另一种表达方式是，您仍然可以在 random 和 rich-text 之间有一个 something 类，并且红色文本仍然有效。

如果您希望它是一个严格的层次结构，那么您可以简单地使用 >，这意味着它必须直接跟在给定的匹配项之后。

.rich-text > .random > .inner {
    color: red;
}

如果 inner 类在 rich-text 中的 random 内并且它必须遵循该层次结构，则只会应用红色文本颜色中间不能有任何其他内容