CSS | :first-child 选择器(1)

📌 相关文章

📜 CSS | :first-child 选择器(1)

📅 最后修改于: 2023-12-03 15:30:09.073000 🧑 作者: Mango

CSS | :first-child 选择器

介绍

:first-child 选择器是 CSS 中的一个伪类，用于选取匹配某种选择器的元素中的第一个子元素。如果某个元素是父元素的第一个子元素，则该元素会被选中。

语法

:first-child 选择器的语法如下：

selector:first-child {
    /* styles */
}

其中，selector 为任意合法的 CSS 选择器，如 div、.class、#id 等。

示例

下面的示例演示如何使用 :first-child 选择器选中父元素的第一个子元素并修改其样式：

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
    <style>
        /* 选中所有 div 元素的第一个子元素 */
        div:first-child {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>标题1</h1> <!-- 第一个子元素 -->
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
    <div>
        <h1>标题2</h1> <!-- 第一个子元素 -->
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
</body>
</html>

注意事项

:first-child 选择器只能选中所有父元素的第一个子元素，无法选中其他位置的子元素。
不要与 :first-of-type 选择器混淆，前者选中的是所有父元素中的第一个子元素，而后者选中的是所有与其他同类元素匹配的第一个元素。
在 HTML 中，空白文本节点也算作子元素，因此如果 HTML 代码中使用了空格、回车等空白符号，则可能会影响 :first-child 选择器的匹配结果。如果需要清除这些空白节点的影响，可以在父元素上使用 font-size: 0 或者 line-height: 0 来消除空白节点的影响。