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


How do I apply a style to all children of an element

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

我可以用

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

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

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

不起作用。

编辑

.myTestClass > *选择器不会在firefox 26中应用该规则，并且根据firebug没有其他用于边距的规则。 如果我将*替换为div，它会起作用。

相关讨论

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

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

JSFiddle-演示

1
2
3
4
5
6
7
8
.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    Text 0
        Text 1
        <span>Text 1</span>
        Text 1
            <p>
Text 2
</p>
            Text 2
       
        <p>
Text 1
</p>
   
    Text 0

相关讨论

代替*选择器，您可以将:not(selector)与>选择器一起使用，并设置绝对不会成为孩子的东西。

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

例：

1
2
3
4
5
6
7
8
9
10
.container > :not(marquee){
        color:red;
    }



    <p><center>[wp_ad_camp_4]</center></p><p>

</p>
    <span></span>

相关讨论