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 * descendant selector将样式应用于后代。然后，添加.myTestClass > * child selector以将样式应用于元素子元素，而不是其子元素。例如：

JSFiddle - DEMO

＆＃13;

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}

＆＃13;

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

＆＃13;

Answer 2

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

编辑：我认为这样会更快，但事实证明我错了。不用理会。

示例：

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


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

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

2 个答案: