一、应用场景
1、设置第一个元素的样式
我们可以通过:first-child选择器来为第一个元素设置样式，下面是一个示例：
ul li:first-child {
font-weight: bold;
}
上面的代码将会把无序列表ul的第一个li元素加粗显示。
2、直接子元素选择
我们也可以使用:first-child选择器来直接选择一个元素的第一个直接子元素，示例代码如下：
ul > li:first-child {
background: #eee;
}
上面的代码中，只有ul元素下的直接子元素li会被选择，并设置背景色为灰色。
3、表格样式设置
在表格中，我们经常会需要为第一列或第一行设置特殊的样式，这时也可以使用:first-child伪类来实现，示例代码如下：
table td:first-child {
text-align: right;
}
上面的代码会为表格的第一列设置右对齐的样式。
二、多个选择器的组合使用
我们还可以将:first-child选择器与其他选择器进行组合使用，来实现更加细粒度的样式设置，下面是一些示例：
1、选择某个元素下的第一个超链接:
div a:first-child {
color: green;
}
2、选择某个元素下的第一个段落:
div p:first-child {
font-size: 24px;
}
3、选择某个元素下的第一个指定元素:
ul li:first-child span {
color: red;
}
上面的示例代码中，我们组合使用了元素选择器、类选择器、ID选择器和伪元素选择器，具体应用场景可以根据需求自行拓展。
三、注意事项
1、:first-child选择器只能选择一个元素的第一个子元素，不能选择其他位置的子元素。
2、不同浏览器对:first-child选择器的兼容性存在差异，需要注意。
3、:first-child选择器只能选择首个子元素，如果要选择除第一个之外的元素，可以使用:nth-child(n+2)伪类选择器。
4、选择器优先级问题：如果同时存在多个选择器，包括:first-child选择器，需要注意选择器之间的优先级，否则可能会导致样式失效。
总之，了解:first-child选择器的基本使用和特点，掌握它的应用场景和一些注意事项，可以让我们的CSS样式更加灵活、精准和美观。
完整代码实例
下面是一个包含首个元素加粗显示、直接子元素背景色为灰色以及表格第一列右对齐样式的完整代码实例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 首个元素加粗 */
ul li:first-child {
font-weight: bold;
}
/* 直接子元素背景色为灰色 */
ul > li:first-child {
background: #eee;
}
/* 表格第一列右对齐 */
table td:first-child {
text-align: right;
}
</style>
</head>
<body>
<ul>
<li>Java</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<ul>
<li>HTML</li>
<li><span>CSS</span></li>
<li>PHP</li>
</ul>
</body>
</html>
