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

小编典典

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

css

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

我可以用

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

这对所有div孩子都有效，但我想对所有孩子都适用的解决方案。我以为我可以用*，但是

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

不起作用。

编辑

该.myTestClass > *选择不使用Firefox 26应用规则，并有根据萤火没有其他规则的保证金。如果我替换为*，它会起作用div。

阅读 538

2020-05-16

共1个答案

小编典典

这些子元素的后代将（可能）继承分配给那些子元素的大多数样式。

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

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

2020-05-16