CSS3新增选择器第一部分（:root 选择器 :empty 选择器 :not 选择器）

最新推荐文章于 2024-08-07 14:30:00 发布

都挺好，刚刚好

最新推荐文章于 2024-08-07 14:30:00 发布

阅读量713

点赞数

分类专栏： CSS 文章标签： css3 前端 css

原文链接：https://blog.csdn.net/weixin_72303943/article/details/125874288?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167495920016782427460264%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167495920016782427460264&b

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

1 、:root 选择器

<title>:root 选择器</title>
    <!-- 内嵌样式标签 -->
    <style>
        /* 因为css1中的继承性---给自身设置样式，其后代元素会继承使用 */
        /* root 块元修饰任何一个标签 */
        /* :root选择器 用匹配文档的根元素 */
        :root{
            font-size: 14px;
            color: pink;
            background-color: aquamarine;
        }
       
    </style>
</head>
<body>
    <h1>小懒猪</h1>

在这里插入图片描述

2 、 :empty 选择器

**:empty选择器选择每个没有任何子级的元素（包括文本节点）。

没有任何子级指的是有空标签都不行！！！**

<title>:empty 选择器</title>
    <style>
        /* :empty选择器 选择每个**没有任何子级**的元素（包括文本节点）。
        没有任何子级 指的是  有空标签都不行！！！ */
        /* 段落标签p 是空的 无任何文本标签  */
        .con p:empty{
            background-color: cornflowerblue;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- div.con>p*7 -->
    <div class="con">
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p></p>
        <p>段落</p>
        <p><span></span></p>
        <p></p>
    </div>

在这里插入图片描述

3 、:not 选择器

**:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

为每个并非

元素的元素设置背景颜色：**

<title>:not 选择器</title>
    <style>
        /* :not(selector) 选择器 匹配每个元素是不是指定的元素/选择器。 */
        /* 未非为每个 p 所指的 元素 （只要不是p的con容器中的元素，我 都能 修饰到）*/
        /* 为每个并非<p>元素的元素设置背景颜色 */
        .con :not(p){
            color: coral;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="con">
        <!-- div{你好} -->
        <div>你好</div>
        <p>你好</p>
        <h2>世界</h2>
        <p>小李子</p>
        <div>你早安</div>
    </div>
————————————————