Css 如何将样式应用于元素的所有子元素

我有一个带有

class='myTestClass'

的元素。如何将css样式应用于此元素的所有子元素？我只想将样式应用于子元素。不是它的孙子

我可以用

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

这适用于所有

div

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

*

，但是

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

不起作用

编辑

.myTestClass>*

选择器不应用firefox 26中的规则，根据firebug，没有其他边距规则。如果我将

*

替换为

div

，它就会工作

正如所评论的，这些子元素的后代将（很可能）继承分配给这些子元素的大多数样式

您需要将

.myTestClass

封装在元素中，并通过添加

.wrapper*

将样式应用于子体。然后，添加

.myTestClass>*

以将样式应用于元素的子元素，而不是其子元素。例如：

JSFiddle-

.wrapper*{
颜色：蓝色；
余量：0 100px；/*仅用于演示*/
}
.myTestClass>*{
颜色：红色；
利润率：0.20px；
}

文本0
文本1
文本1
文本1
文本2

文本2
文本1

文本0

您可以将

:not（selector）

与

选择器一起使用，而不是

*

选择器，并设置肯定不会是孩子的内容

编辑：我以为会更快，但结果证明我错了。无视

例如：

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


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

.container>：非（选框）{
颜色：红色；
}

它如何“不起作用”？请记住，这些子元素的子元素将（很可能）继承分配给这些子元素的大多数样式。请使用检查器对此进行调试，并查看是否有规则将其覆盖。切勿使用通用选择器。它对渲染有很大的性能影响。@yesIcan:好的，很高兴知道……有没有不使用通用选择器的替代解决方案？在现代浏览器上，通用选择器的性能并没有那么差。我自己的工作经验证实了作者的结论。只要你愿意，就可以随时使用通用选择器，如果性能符合你的情况，那么就没有必要寻找替代方案。这样做有什么好处？@WilsonBiggs-这似乎是一种误导性的尝试，“不使用通用选择器”。但这显然是一个坏主意，因为它“接近通用”，但需要额外的测试——因此它必须完成通用选择器需要完成的所有工作，然后再做额外的工作。：not（selector）只在safari上工作，在chrome/firefox上似乎不起作用