CSS选择第一个

在网页开发中，使用CSS选择器可以轻松地选择和样式化特定的元素。有时候我们可能想要选择匹配条件的第一个元素，这时就需要使用CSS伪类选择器来实现。

:first-child 伪类

:first-child 伪类选择器用于选取父元素的第一个子元素。例如，如果我们想选择一个ul列表中的第一个li元素，可以使用以下代码：

ul li:first-child {
  /* 这里是样式 */
}

在这个示例中，我们选择了ul元素下的第一个li元素，并且为其设置了样式。下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
</ul>

</body>
</html>

在这个示例中，我们为ul列表中的第一个li元素设置了红色文本颜色。如果你在浏览器中运行这段代码，你会看到第一个元素的文本变为红色。

:first-of-type 伪类

除了:first-child之外，还有一个伪类选择器可以选择匹配条件的元素。:first-of-type选择器会选择父元素下第一个符合标签名的子元素。举个示例，如果我们希望选择一个div下的第一个p元素，可以使用以下代码：

div p:first-of-type {
  /* 这里是样式 */
}

下面是一个示例代码，演示了如何为一个div下的第一个p元素设置样式：

<!DOCTYPE html>
<html>
<head>
<style>
div p:first-of-type {
  font-weight: bold;
}
</style>
</head>
<body>

<div>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
</div>

</body>
</html>

在这个示例中，我们为div下的第一个p元素设置了粗体样式。如果你在浏览器中运行这段代码，你会看到第一个p元素的文本变为粗体。