h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

root：将样式绑定到根元素（html中的根元素是<html></html>）

举个栗子

    :root{
        background-color: yellow;
    }
    body{
        background-color: lightgray;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: black;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
效果：除了div黑色，div所在行是浅灰色，其余部分黄色（：root）
（效果图太大 不放了）

所以：我以为，root的样式是<html>以内<body>以外部分的样式

：not 不选择某个元素中的某个部分

    .box *:not(h1){
/*选择.box下所有元素中不是h1的 */
        width: 50px;
        height: 50px;
        background-color:red;
    }

<body>
    <div class="box">
        <div></div>
        <div></div>
        <h1></h1>
    </div>
    
</body>

:empty 元素中内容空白时显示的样式

    <style>
        div:empty{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

<body>
    <div class="div1"></div>
</body>
div中没有任何东西，会使用这个样式，为div内部添加内容后，该样式失效

:target 对页面上target元素制定样式，指定的样式会在用户点击并成功跳转后显示

    <style>
       .div1{
           height: 800px;
           background-color: lightgray;
       }
       :target{
           background-color: red;
       }
    </style>
</head>
<body>
    <p><a href="#div1">click</a></p>
    <p><a href="#div2">click</a></p>
    <p><a href="#div3">click</a></p>
    <div class="div1"></div>
　　//这个div用来拉长页面，让跳转效果更明显
    <div id="div1">content</div>
    <div id="div2">content</div>
    <div id="div3">content</div>
</body>
　　//这个测试记得清缓存

h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

猜你喜欢