css3新增选择器（root选择器、:empty选择器、:not选择器、:checked选择器）

正在修炼web的小芮

已于 2022-07-19 11:32:32 修改

阅读量870

点赞数 1

分类专栏： css3 文章标签： css3

于 2022-07-19 11:17:07 首次发布

本文链接：https://blog.csdn.net/m0_71814235/article/details/125867638

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

root选择器

:root选择器用匹配文档的根元素。

在HTML中根元素始终是HTML元素(HTML标签)。

  <!-- 内嵌 -->
    <style>
        /* :root选择器 用匹配文档的根元素 */
        :root{
            font-size: 14px;
            color: skyblue;
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>小芮</h1>
</body>

因为我们给根元素HTML标签，设置了css样式，其后代元素会继承使用。

效果预览图：

:empty选择器

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

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

    <style>
        /* :empty选择器 选择每个没有任何子级的元素（包括文本节点）
        没有任何子级 指的是  有空标签都不行！！ */
        .con p:empty{
             height: 30px;
             background-color: aqua;
        }
    </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>
</body>

效果预览图

:not选择器

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

为每个并非<p>元素的元素设置背景颜色：

    <style>
   /* :not(selector) 选择器 匹配每个元素是不是指定的元素/选择器  */
   /* 只要不是p的这个.con容器中的元素，我都能修饰到 */
   .con :not(p){
    color: blueviolet;
    font-size: 20px;
   }
    </style>
</head>
<body>
    <div class="con">
        <!-- div{你好} -->
        <div>你好</div>
        <p>你好</p>
        <h2>你好</h2>
        <p>你好</p>
        <div>你好</div>
    </div>
</body>

注意：使用这个选择器的时候，要把范围缩小一些。不要直接写 :not(p) 。这样写容易产生歧义---body标签会用这个样式，整个页面都会被铺成红色。p段落标签又是body里的子元素，整个p段落的背景就是红色。容易让人产生歧义。所以，我们要把范围缩小一些，使用这个选择器。

效果预览图

:checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

    <style>
        /* :checked 选择器 匹配每个选中的输入元素（**仅适用于单选按钮或复选框**） */
        /* checked 为当前这个容器中 选中的元素 设置如下样式规则 */
        .login input:checked{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="login">
        <div>
            <label for="">性别：</label>
            <input type="radio" name="sex" id="" value="男" checked="checked">男
            <input type="radio" name="sex" id="" value="女">女
        </div>
        <div>
            <label for="">爱好：</label>
            <input type="checkbox" name="" id="" value="登山">登山
            <input type="checkbox" name="" id="" value="旅行">旅行
            <input type="checkbox" name="" id="" value="陪伴">陪伴

        </div>
    </div>
</body>

注意：

给单选按钮和复选框直接设置边框和背景色，是设置不上去的。

我们可以选择间接设置，间接设置的方法有2个。要么是通过before或after伪类绘制小图形。要么是通过设计师绘制的一个小图，你拿过来，当背景图去使用。

效果预览图