CSS 选择第一个元素

在前端开发中，CSS 选择器是一种非常有用的工具，可以让我们选择文档中的特定元素，以便对其进行样式设置。在这篇文章中，我们将重点介绍如何使用CSS选择器来选择文档中的第一个元素。

1. 什么是CSS选择器

CSS选择器是一种模式匹配的方式，用于确定哪些元素会应用指定的样式。CSS选择器以单个标签名、类名、id名或属性值作为选择器，并通过这些选择器来定位文档中的元素。

在CSS中，可以通过多种方式来选择元素，包括但不限于简单选择器、组合选择器、属性选择器、伪类选择器等。每一种选择器都有自己独特的用途和匹配规则。

2. 选择第一个元素

在实际开发中，我们经常会遇到需要选择文档中的第一个元素的情况。比如，我们想要为列表中的第一个项目添加特定的样式，或者为页面中的第一个段落设置不同的字体大小。

在CSS中，我们可以使用:first-child伪类来选择文档中的第一个元素。:first-child伪类表示选取父元素的第一个子元素，并且它会选择所有符合条件的元素，而不仅仅是第一个。

2.1 选择第一个子元素

假设我们有以下的HTML结构：

<ul>
    <li>第一个项目</li>
    <li>第二个项目</li>
    <li>第三个项目</li>
</ul>

如果我们想要为列表中的第一个项目添加特定的样式，可以使用:first-child伪类来选择第一个li元素：

li:first-child {
    color: red;
}

这样就会将列表中的第一个项目文字颜色设为红色。

2.2 选择第一个指定类型元素

有时候，我们想要选择文档中的第一个指定类型的元素，而不仅仅是子元素。可以使用:first-of-type伪类来选择文档中第一个符合条件的元素。

假设我们有以下的HTML结构：

<div>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <span>第一个span</span>
    <p>第三个段落</p>
</div>

如果我们想要选择第一个p元素并设置其字体大小，可以这样做：

p:first-of-type {
    font-size: 18px;
}

这样就会将文档中的第一个p元素的字体大小设为18px。

3. 示例代码

下面我们来看一个完整的示例，展示如何使用CSS选择第一个元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择第一个元素</title>
    <style>
        li:first-child {
            color: red;
        }

        p:first-of-type {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个项目</li>
        <li>第二个项目</li>
        <li>第三个项目</li>
    </ul>

    <div>
        <p>第一个段落</p>
        <p>第二个段落</p>
        <span>第一个span</span>
        <p>第三个段落</p>
    </div>
</body>
</html>

在这个示例中，我们使用:first-child和:first-of-type选择器来选择第一个元素，并分别为其添加了不同的样式。