:first-child 选择器

: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.