零基础学习CSS(8)——:root、:empty、:first-chlid、:last-chlid、:only-chlid、:frist-of-type、:last-of-type等

Dragon水魅

发布于 2026-01-23 14:52:33

1110

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置根元素的样式 */
        :root {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>I love FishC.</p>
</body>
</html>

:empty 选择器用于匹配没有子元素的元素标签：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置根元素的样式 */
        :empty {
            background-color: red;
            width: 100px;
            height: 20px;
        }
    </style>
</head>
<body>
    <p></p>
    <p>I love FishC.</p>
    <p></p>
</body>
</html>

:first-chlid 选择器和 :last-chlid 选择器用于修改第一个和最后一个对应元素的样式：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置第一个p元素和最后一个p元素的样式 */
        p:first-child {
            border: 2px solid green;
        }
        p:last-child {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p>I love FishC.</p>
    <p>I love FishC.</p>
    <p>I love FishC.</p>
</body>
</html>

:only-chlid 选择器用于选取父元素中唯一的子元素：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置第一个p元素和最后一个p元素的样式 */
        p:first-child {
            border: 2px solid green;
        }
        p:last-child {
            border: 2px solid red;
        }
        span:only-child {
            border: 1px solid pink;
        };
    </style>
</head>
<body>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
</body>
</html>

:only-of-type 选择器用于选取父元素中唯一类型的子元素：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* :only-of-type 选择器匹配父元素下唯一类型的子元素 */
        /* :only-child 和 only-of-type 的主要区别：only-of-type的父元素下可以有其他元素，only-child 不行*/
        strong:only-child {
            border: 2px solid pink;
        };
    </style>
</head>
<body>
    <p>I <span>love</span> <strong>FishC</strong></p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
</body>
</html>

:first-of-type 和 last-of-type 用于匹配父元素下相同类型的第一个和最后一个：

<!DOCTYPE html>
<html>
<head>
    <title>结构伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* first-of-type 和 last-of-type */
        p:first-of-type {
            border: 2px solid green;
        }
        p:last-of-type {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <span>这才是父元素下的第一个元素</span>
    <p>I <strong>love</strong> <span>FishC</span></p>
    <p>I <span>love</span> FishC.</p>
    <p>I <span>love</span> FishC.</p>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除

基础