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

【问题标题】：How do I apply a style to all children of an element如何将样式应用于元素的所有子元素
【发布时间】：2014-12-08 14:35:42
【问题描述】：

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

我可以使用

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

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

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

不起作用。

编辑

.myTestClass > *选择器没有应用firefox 26中的规则，根据firebug没有其他的margin规则。如果我将* 替换为div，它就会起作用。

【问题讨论】：

它是如何“不工作”的？请记住，这些子元素的后代将（很可能）继承分配给这些子元素的大部分样式。
用检查器调试这个，看看是否有规则接管它

标签： css css-selectors

【解决方案1】：

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

您需要将.myTestClass 包装在一个元素中，并通过添加.wrapper * descendant selector 将样式应用于后代。然后，添加 .myTestClass > * child selector 将样式应用于元素子元素，而不是其子元素。比如这样：

JSFiddle - DEMO

.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>

【讨论】：

永远不要使用通用选择器。它对渲染有很大的性能影响。
@yesIcan：好的，很高兴知道......你有没有不使用通用选择器的替代解决方案？
通用选择器的性能在现代浏览器上并没有那么糟糕。 Here's a reference。我自己的工作经验证实了作者的结论。
随时使用通用选择器，如果性能适合您的情况，则无需寻找替代方案。

【解决方案2】：

您可以将:not(selector) 与> 选择器一起使用，而不是* 选择器，并设置绝对不会是孩子的东西。

编辑：我认为它会更快，但事实证明我错了。无视。

例子：

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


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

【讨论】：

这样做有什么好处？
@WilsonBiggs - “不使用通用选择器”似乎是一种错误的尝试。但这显然是一个坏主意，因为它是“近乎通用的”，但需要额外的测试 - 所以它必须完成通用选择器所做的所有工作，然后再做额外的工作。
:not(selector) 仅适用于 safari，似乎不适用于 chrome / firefox