第一个孩子选择

Question

在本练习中，我很想知道第一个子选择器的工作原理。尝试选择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的第一个孩子，但没有效果。

Answer 1

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

的成员。

为此您需要插入子组合器：

.col1 > :first-child {}