Html 如何将 CSS 仅应用于某个类的直系子代

How to apply CSS to only immediate children of a certain class

提问by Dvir Levy

I have a divand in that divI want to create another divwith a different class and have the inner divcompletely separated from the outer divCSS settings.

我有一个div，div我想div用不同的类创建另一个，并将内部div的divCSS 设置与外部的CSS 设置完全分开。

Like this:

像这样：

<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; }

What I want is to unset the red color from the h2in the "inner" div

我想是从取消设置红色h2的"inner" div

It might seem stupid not to just overweight the color to black here, but what if I have a lot more arguments in the CSS or even if it's dynamic.

在这里不只是将颜色超重为黑色似乎很愚蠢，但是如果我在 CSS 中有更多的参数或者即使它是动态的，该怎么办。

Edit:I guess it isn't clear, but what I need is actually kind of the opposite of the answers I got so far. I have a main-container div and it has alot of settings in the CSS. Now I want to insert a div into the main-container without it having any of the main-container CSS settings.

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

回答by Tim D'Haene

.outer > h2 { color:red; }

this way only the direct child of the outer div get this color value, should fix the job.

这样，只有外部 div 的直接子级才能获得此颜色值，应该可以解决此问题。

回答by Scott

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

sets all elements within the inner container as having the color black.

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

Demo here

演示在这里

回答by Chris Li

I think what you need is

我认为你需要的是

.inner h2 {color: inherit}