如何通过class或id使用css来选择所有的子元素？

Question

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

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

但上面的逻辑将只实现h1标记。那么有可能我可以在所有子元素上添加样式属性？我搜索了一下，发现接受answer，但它不起作用。

Answer 1

使用universal selector而不是type selector。

.feature-section-heading > * 

Answer 2

访问与Css * selector所有儿童，如下面的代码片段：

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

Answer 3

CSS

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

可以使用*所有元素选择。

Answer 4

您可以使用*（Asterik选择）

这里是Demo

CSS

.foo *{background:red} 

HTML

<div class="foo"> 

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

</div> 

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