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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我可以用

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

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

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

不起作用。

编辑

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

回答：

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

您需要将.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>

以上是 如何将样式应用于元素的所有子元素 的全部内容， 来源链接： utcz.com/qa/410731.html

回到顶部