第一个孩子选择

时间:2017-02-10 15:21:48

标签: html css css-selectors

在本练习中,我很想知道第一个子选择器的工作原理。尝试选择h1标记并为其添加颜色。

.col1:first-child {
  color: green;
}
<div class="col1">
  <h1> This is  something awesome!</h1>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorlike).</p>
  <button type="button" class="button">Click Me!</button>
</div>

注意:这个问题只涉及到第一个孩子及其实际工作方式,因为我认为h1是div col1的第一个孩子,但没有效果。

1 个答案:

答案 0 :(得分:0)

.col1:first-child表示&#34; col1的成员,其父的第一个孩子&#34;不是&#34;第一个 每个元素都是col1&#34;

的成员。

为此您需要插入子组合器

.col1 > :first-child {}