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

最新推荐文章于 2023-07-03 10:04:05 发布

Dragon水魅

最新推荐文章于 2023-07-03 10:04:05 发布

阅读量326

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109016671

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

鱼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>

Dragon水魅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(8)——:root、:empty、:first-chlid、:last-chlid、:only-chlid、:frist-of-type、:last-of-type等

官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文:root 选择器：https://man.ilovefishc.com/pageCSS3/dotroot.html:empty 选择器：https://man.ilovefishc.com/pageCSS3/dotEmpty.html:fi
复制链接

扫一扫