1 、:root 选择器

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

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

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>

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

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

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