CSS3之选择器

最新推荐文章于 2024-04-21 10:00:27 发布

豆芽菜♀

最新推荐文章于 2024-04-21 10:00:27 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/m0_57752092/article/details/124482734

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、层级选择器

   <style>
            /*   +当前元素后面的第一个兄弟*/
            .child+li{
                background-color: aqua;
            } 
            /*   ~当前元素后面的所有兄弟 */
            .child~li{
                background-color: antiquewhite;
            }
            /*   >是亲儿子关系，空格是后代关系 */
            .box li{
                border: 1px solid red;
            }
    </style>

</head>
<body>
        <ul class="box">
            <li>11111
                <ul>
                    <li>111-111</li>
                    <li>111-222</li>
                    <li>111-333</li>
                </ul>
            </li>
            <li class="child">22222</li>
            <li>33333</li>
            <li>44444</li>
        </ul>
</body>

二、属性选择器

    <style>
        /*属性选择器 [class, ,]*/
       [class]{
           background-color: aqua;
       }

  /* ------------------------------------------- */

      div[class]{
           background-color: rgb(168, 197, 143);
       }
       /*div.box2放一起表示有div还要有box2
       div .box2有空格表示div下面的孩子有box2  */
       div.box2{
           color: rgb(153, 49, 49);
       }
/* --------------------------------------------------- */
     p[class]{
           background-color: rgb(106, 24, 169);
       }

/* --------------------------------------------------- */

    <style> 
     input[name]{
          background-color: yellow;
      }

      input[type=email]{
          background-color: green;
      }
      /* 完全匹配，只能包含box1 */
      div[class=box1]{
          border: 1px solid blue;
      }
      /* 模糊匹配，其中有box1就行 */
      div[class~=box1]{
          color: rgb(96, 232, 12);
      }
    </style>

</head>
<body>
      <div class="box1">div-1111</div>
      <div class="box2">div-2222</div>
      <div>div-3333</div>
      <p class="p1">p-1111</p>
      <p class="p2">p-2222</p>
      <p>p-3333</p>
    <div>
        <h3>注册页面</h3>
        用户名：<input type="text" name=""><br>
        密码：<input type="password" name=""><br>
        年龄：<input type="number"><br>
        邮箱：<input type="email"><br>
    </div>
</body>

   <style>
        /* 模糊匹配 */
    /*  class^="b" 以b开头的
        class$="b" 以b结尾的
        class*="b" 包含b这个字符就行 */
        div[class*="1"],p[class*="2"]{
            background-color: orangered;
        }
   </style>
<body>
      <div class="box1">div-1111</div>
      <div class="box2">div-2222</div>
      <div>div-3333</div>
      <div class="box1">div-4444</div>
      <div class="box1 box2">div-5555</div>
      <p class="p1">p-1111</p>
      <p class="p2">p-2222</p>
      <p>p-3333</p>
</body>

三、伪类选择器

    <style>
        .box{
            width: 940px;
            margin: 0 auto;
            height: 100px;
            background-color: yellow;
        }
        .box div{
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
            margin-right: 20px;
        }
        /* .box .last{
            margin-right: 0;
        } */
        .box div:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
      <div class="box">
          <div></div>
          <div></div>
          <div class="last"></div>
      </div>
</body>

    <style>
        ul li:first-child{
            background-color: yellow;
        }
        ul li:last-child{
            background-color: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
</body>

   <style>
        /* 第几个 */
        /* li:nth-child(2){
            background-color: blue;
        } */
        /* li:nth-child(2n){
            background-color: blue;
        } */
        /* 偶数：2n(even)  奇数：2n+1或者2n-1(odd) */
        li:nth-child(odd){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
</body>

    <style>
        div p:only-child{
            background: red;
        }
    </style>
</head>
<body>
    <div>
        <p>111111</p>
        <p>222222</p>
    </div>
    <div>
        <p>111111</p>
    </div>
</body>

   <style>
        div{
           width: 100px;
           height: 100px;
        }
        /* empty必须什么都没有，空格也不能有 */
        div:empty{
            background-color: yellow;
        }
        /* html,body{
            height: 100%;
        } */
        :root,body{
            height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div>
        1111111
    </div>
    <div></div>
</body>

   <style>
                *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style:none;
            position: fixed;
            top: 150px;
            right: 0;
        }
        li{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            line-height: 50px;
            text-align: center;

        }
        div{
            width: 100%;
            height: 300px;
        }
 /* =======================重要============================= */
        div:target{
            background-color: yellow;
        }
 /* ==================================================== */
    </style>
</head>
<body>
    <ul>
        <li><a href="#a">京东秒杀</a></li>
        <li><a href="#b">双十一特惠</a></li>
        <li><a href="#c">特色广场</a></li>
        <li><a href="#d">频道优选</a></li>
    </ul>
    <div id="a">京东秒杀</div>
    <div id="b">双十一特惠</div>
    <div id="c">特色广场</div>
    <div id="d">频道优选</div>
</body>

    <style>
       div.content{
           display: none;
       }
       div.content:target{
           display: block;
       }
    </style>
</head>
<body>
    <div>
        <a href="#aaa">aaa</a>
        <div id="aaa" class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Ea quibusdam ducimus, autem quisquam minus consequatur amet accusamus 
            fugiat nesciunt recusandae iusto, optio vel mollitia voluptates 
            reprehenderit, inventore sint accusantium repellat.
        </div>
    </div>
    <div>
        <a href="#bbb">bbb</a>
        <div id="bbb" class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Ea quibusdam ducimus, autem quisquam minus consequatur amet accusamus 
            fugiat nesciunt recusandae iusto, optio vel mollitia voluptates 
            reprehenderit, inventore sint accusantium repellat.
        </div>
    </div>
    <div>
        <a href="#ccc">ccc</a>
        <div id="ccc" class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Ea quibusdam ducimus, autem quisquam minus consequatur amet accusamus 
            fugiat nesciunt recusandae iusto, optio vel mollitia voluptates 
            reprehenderit, inventore sint accusantium repellat.
        </div>
    </div>
</body>

    <style>
        /* input:enabled{
            background-color: red;
        } */
        input:disabled{
            background-color: yellow;
        }
        input:focus{
            background-color: blue;
        }
        input[type=checkbox]{
            /* 去掉默认样式 */
            appearance:none;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        input:checked{
            background-color: orangered;
        }
        
        div::selection{
            background-color: rgb(179, 152, 203);
            color: rgb(221, 14, 14);
        }
    </style>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="" id=""><br>
        密码：<input type="password" name="" id=""><br>
        记住用户名：<input type="checkbox" name="" id=""><br>
        <input type="submit" disabled>
    </form>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aperiam, reiciendis
         nam maxime voluptates labore quae animi repudiandae quia dignissimos 
        expedita pariatur consequatur cumque voluptatum eligendi error ipsam tempore eveniet!
    </div>
</body>

    <style>
      li:not(:first-child){
        background-color: blueviolet;
      }
      li:not(:nth-child(2n+1)){
          background-color: yellow;
      }
      div{
          width: 100px;
          height: 100px;
      }
      div:not(:empty){
        background-color: green;
      }

    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li></li>
    </ul>
    <div>55555</div>
</body>

豆芽菜♀

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3之选择器

一、层级选择器 <style> /* +当前元素后面的第一个兄弟*/ .child+li{ background-color: aqua; } /* ~当前元素后面的所有兄弟 */ .child~li{ background-color: antiquewhite; }
复制链接

扫一扫