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

Question

我有一个带有

class='myTestClass'

的元素。如何将 css 样式应用于此元素的所有子元素？我只想将样式应用于元素子元素。不是它的孙子。

我可以用

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

适用于所有

div

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

*

，但是

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

不起作用。

编辑

.myTestClass > *

选择器不应用firefox 26中的规则，并且根据firebug，没有其他关于边距的规则。如果我用

*

替换

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>

Answer 2

要将样式应用于 CSS 中元素的所有子元素，可以使用后代组合符 ( )。此组合器将样式应用于嵌套在特定父元素中的元素。这是一般方法：

基本用法

如果要将样式应用于父元素的所有直接子元素和嵌套子元素，可以使用以下 CSS：

.parent-element * {
   /* Your styles here */
}

在此示例中：

• .parent-element 是父元素的类。
• * 选择器针对 .parent-element 的所有后代元素。

示例

假设您有以下 HTML 结构：

<div class="parent-element">
  <p>This is a paragraph.</p>
  <div>
    <span>This is a span inside a div.</span>
  </div>
</div>

要设置 .parent-element 的所有子元素的样式，您可以编写：

.parent-element * {
  color: red;
  font-family: Arial, sans-serif;
}

这将使 .parent-element 中所有嵌套元素的文本颜色变为红色，并将字体设置为 Arial。

仅限儿童

如果您只想将样式应用于直接子元素（即不应用于嵌套元素），请使用子组合器 (>)：

.parent-element > * {
  /* Your styles here */
}

示例

<div class="parent-element">
  <p>This is a paragraph.</p>
  <div>
    <span>This is a span inside a div.</span>
  </div>
</div>

CSS：

.parent-element > * {
  color: blue;
}

在这种情况下，只有

<p>

元素会有蓝色文本，因为它是 .parent-element 的直接子元素，而

<span>

不会受到影响。

总结

• 使用 .parent-element * 为所有后代元素设置样式。
• 使用 .parent-element > * 仅设置直接子元素的样式。

随意调整选择器和样式以满足您的需求！

Answer 3

您可以使用

*

和

:not(selector)

选择器来代替

>

选择器，并设置绝对不会是子项的内容。

编辑：我以为这样会更快，但事实证明我错了。无视。

示例：

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


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