如何对元素的所有子元素应用样式

我有一个元素与 class='myTestClass'。如何将 css 样式应用于此元素的所有子元素？我只想将样式应用于元素子元素。而不是它的孙子孙女。

我可以利用

.myTestClass > div {
margin: 0 20px;
}

它适用于所有的 div儿童，但我想要一个解决方案，适用于所有的儿童。我以为我可以用 *，但是

.myTestClass > * {
margin: 0 20px;
}

不起作用。

剪辑

.myTestClass > *选择器不会在 firefox26中应用该规则，而且根据 firebug，也没有其他关于页边距的规则。如果我用 div代替 *就可以了。

382105 次浏览
小开
最佳答案

如 David Thomas所述，这些子元素的后代(可能)将继承分配给这些子元素的大多数样式。

您需要将 .myTestClass包装在一个元素中，并通过添加 .wrapper *后代选择器将样式应用于后代。然后，添加 .myTestClass > *选择儿童将样式应用于元素子元素，而不是其子元素。例如:

JSFiddle-演示

.wrapper * {
color: blue;
margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
color:red;
margin: 0 20px;
}
<div class="wrapper">
<div class="myTestClass">Text 0
<div>Text 1</div>
<span>Text 1</span>
<div>Text 1
<p>Text 2</p>
<div>Text 2</div>
</div>
<p>Text 1</p>
</div>
<div>Text 0</div>
</div>

小开

您可以使用 :not(selector)和 >选择器来代替 *选择器，并设置一些肯定不是子选择器的内容。

编辑: 我以为它会更快，但结果是我错了。无视。

例如:

.container > :not(marquee){
color:red;
}




<div class="container">
<p></p>
<span></span>
<div>

提交答案