:first-child选择器
p:first-child选择的元素满足两个要求：
- 是第一个子元素
- 这个子元素刚好是p
下面来看一个案例：
p:first-child {
color: red;
}
li:first-child {
color: blue;
}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
分析：
- 第一个规则是将某元素的“第一个并且是p元素的子元素”设置颜色为红色
- 第二个规则是将某元素的“第一个并且是li元素的子元素”设置颜色为蓝色
效果如下：
These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.
注意：如果HTML代码改成如下情况，由于p元素不再是第一个子元素，而第一个子元素又不是p，因此结果会发生变化。
<div>
<ul>These are the necessary steps:</ul>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
- These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.