选择器进阶1(后代，子代，群组，交集，伪类，兄弟)

最新推荐文章于 2022-11-21 20:02:49 发布

weixin_43370067

最新推荐文章于 2022-11-21 20:02:49 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/weixin_43370067/article/details/106142978

版权

后代选择器


/* 后代选择器可以选中儿子、孙子、... */
        .box p{
            color: green;
        }

        p span{
            color: red;
        }

   <!-- 选中box里边的div -->
 <div class="box">
        <p>p1</p>
        <div>div1</div>
        <div>
            <p>p2</p>
        </div>
    </div>

    <p>
        <span>span1</span>
    </p>
    <span>span2</span>

子代选择器

  .box>p {
            color: red;
        }
       /*直接选择box类之后的子代为p的元素*/

        .box1>.span2{
            color: skyblue;
        }
        /*直接选择类名box1之后的子代类名为span2的元素*/

群组选择器


/*给h1,h2,h3,p,类名为div1标签字体颜色都设置为orange*/
  <style>
        h1,h2,h3,p,.div1{
            color: orange;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <div class="div1">div1</div>
    <div>div2</div>
    <p>p1</p>
</body>

交集选择器

 <style>
        /*选择div标签并且它的类名是box*/
       div.box{
           color: orange;
       }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">div1</div>
        <p class="box">p1</p>
        <div class="box1"></div>
    </div>
</body>

伪类选择器


 <style>
        /* 超链接   可以被访问  
        四种状态：当链接没被访问时   当链接访问过后   鼠标滑过  鼠标按下的时候 */
      
        a:link{
            color: red;
            /* 链接没被访问时  */
        }

        a:visited{
            color: gray;
            /* 访问过后 */
        }
        a:hover{
            color: orange;
            /* 鼠标滑过 */
        }
     
        a:active{
            color: green;
            /* 鼠标按下 */
        }

        div,p{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        div:hover{
            background-color: green;
        }

        p:hover{
            color: pink;
        }
        p:active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <a href="#">跳转</a>

    <div></div>
    <p>p1</p>
</body>

兄弟选择器

<style>
/*
当big和small是兄弟关系的时候，选择器中间用+隔开，代表选择后边紧挨着的兄弟
*/
        .big{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: orangered;
            display: none;
        }
        .big:hover + .small {
            display: block;
        }
    </style>
</head>
<body>
    <div class="big">

    </div>
 
    <div class="small">

    </div>
</body>

当滑过big时
控制small的显示或隐藏

~代表big后边的任何一个兄弟


   <style>
        .big{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: orangered;
            display: none;
        }
        .big:hover ~ .small {
            display: block;
        }
    </style>
</head>
<body>
    <div class="big">

    </div>
 <span>

 </span>
    <div class="small">

    </div>
</body>