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

Question

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

我可以用

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

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

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

不起作用。

编辑

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

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