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

Question

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

我可以用

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

哪个适合所有div孩子,但我想找一个适合所有孩子的解决方案.我以为我可以用*,但是

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

不起作用.

编辑

该.myTestClass > *选择不使用Firefox 26应用规则,并有根据萤火没有其他规则的保证金.和它的作品,如果我取代*用div.

Answer 1

正如David Thomas所评论的那样,这些子元素的后代将(可能)继承分配给这些子元素的大多数样式.

您需要将.myTestClass内部包装为元素,并通过添加.wrapper * 后代选择器将样式应用于后代.然后,添加.myTestClass > * 子选择器以将样式应用于元素子项,而不是其子项.例如这样:

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>