如何将CSS应用于特定类的直接子级

Question

我有一个div，div我希望用另一个类创建另一个div，并使内部div与外部{{1}完全分开CSS设置。

像这样：

div

<div class="outer">
    <div><h1> h1 </h1><div>
    <div class="inner">
        <h2> h2 </h2>
    </div>
    <h2> h2 </h2>
</div>

我想要的是取消.outer h1{ color:blue; } .outer h2{ color:red; } .inner { height: 111px; }

中h2的红色

在这里看起来不仅仅是把颜色增加到黑色似乎很愚蠢，但如果我在CSS中有更多的参数，或者即使它是动态的，那该怎么办呢。

编辑：我想这还不清楚，但我需要的实际上与我到目前为止的答案相反。我有一个主容器div，它在CSS中有很多设置。现在我想在主容器中插入一个div，而不需要任何主容器CSS设置。

Answer 1

.outer > h2 { color:red; }

这样只有外部div的直接子节点才能得到这个颜色值，应该修复这个工作。

Answer 2

.outer .inner * { color: #000; }

将内部容器中的所有元素设置为黑色。

Demo here

Answer 3

我认为你需要的是

.inner h2 {color: inherit}