如何使用css按类或id选择所有子元素？

Question

我想在此.feature-section-heading类的所有子元素上添加特定样式属性。我知道我可以使用下面的技巧

来做到这一点

.feature-section-heading > h1 {...}

但是上面的逻辑只会在h1标签上实现。那么有可能我可以在所有子元素上添加样式属性吗？我搜索了这个并找到了接受的answer，但它不起作用。

Answer 1

<强> CSS

.feature-section-heading > * {...}

您可以使用*作为所有元素选择器。

Answer 2

使用universal selector代替type selector。

.feature-section-heading > *

Answer 3

你可以使用*（Asterik Selector）

以下是Demo

CSS

.foo *{background:red}

HTML

<div class="foo">

<span>1</span>
<p>2</p>
<div>3</div>

</div>

Answer 4

使用Css * selector访问所有儿童，如下面的代码段所示：

.feature-section-heading > * {
    background: red;
}

Answer 5

请找到说明所需行为的jsfiddle链接。

<强> HTML

<div class="feature-section-heading">
    I am parent div
    <br />
    <h1>
        Heading
    </h1>
    <div>
        Child DIV
    </div>
    <div>
        Child DIV
    </div>
    <p>
        Child paragraph
    </p>
    <p>
        Child paragraph
    </p>
    <p>
        Child paragraph
    </p>
    <span>
        Child span
    </span>
</div>

<强> CSS

.feature-section-heading {
  color: red;
}
.feature-section-heading > :not(:empty){
    color: darkgreen;
}