zoukankan      html  css  js  c++  java
  • h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

    文章地址 https://www.cnblogs.com/sandraryan/

    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>
      //这个测试记得清缓存
  • 相关阅读:
    【模板】Sparse-Table
    UVa 11235 Frequent values
    【模板】树状数组
    UVa 1428 Ping pong
    数学技巧
    UVa 11300 Spreading the Wealth
    UVa 11729 Commando War
    UVa 11292 Dragon of Loowater
    POJ 3627 Bookshelf
    POJ 1056 IMMEDIATE DECODABILITY
  • 原文地址:https://www.cnblogs.com/sandraryan/p/10749723.html
Copyright © 2011-2022 走看看