复合元素选择器以及它们的权重关系

最新推荐文章于 2024-07-26 08:00:00 发布

拾玥花开

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1.2k

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_44691513/article/details/104211118

版权

复合选择器以及权重

1.复合选择器

交集选择器：交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

**并集选择器:**是各个选择器通过逗号连接而成的。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<style>
/*交集选择器*/
    p.dd{
        color:red;
    }
    /*并集选择器*/
    h1,h2{
        color:blue;
    }
</style>
<head>
    <p class="dd">kiva</p><!-- red-->
    <h1>ixa</h1> <!--blue-->
    <h2>ooo</h2>
</head>

后代选择器:后代元素选择器是一个空格，空格前后各有一个选择器,作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素.

<style>
    .ddd ul{
        color:red;
    }
</style>
<head>
    <div class="dddd">
        <p>
            <ul>
                <li>001</li> <!--ul块中三个li标签001，002，003变红-->
                <li>002</li>
                <li>003</li>
            </ul>
        </p>
    </div>
    <div>
        <p>
            <ul>
                <li>001</li>
                <li>002</li>
                <li>003</li>
            </ul>
        </p>
    </div>
</head>

子代选择器：后代选择器时选中所有的后代，包括子代，子代的子代，等等，而子代选择器指选择某个后代。

子代元素选择器是一个大于号，大于号前后各有一个选择器作用是：找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素。

<head>
   <style>
    /* 子代选择器 */
    /* 子代选择器用> */
    .aa>p>a{
        background-color:red;
    }
    </style>
<body> 
</head>
    <div class="aa">
        <p>
            <a href="#">百度</a>
        </p>
        <a href="#">淘宝</a>
    </div>
</body>

相邻选择器：相邻元素选择器是一个+号，作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素。

<head>
    <style>
        /* + */
    .dd+div{
        background-color: red;
    }
  </style>
</head>  
<body>
    <div class="dd">111</div>
    <div>222</div><!--一个加号就相邻元素变红，2个就相邻的相邻-->
    <div>223</div>
    <div>221</div>
</body>

兄弟元素选择器：兄弟元素选择器是一个_{号，作用是：找到}号前的选择器所选中的元素紧跟其后所有符合~号后的选择器选中的元素。

<head>
    <style>
        .dd~p{
            color:red:
        }
    </style>
</head>
<body>
    <div class="dd">ddddd
        <p>dddddd</p> <!--只有这个变红-->
    </div>
    <a href="#">百度</a>
    <p>444444</p> <!--这个不变化，因为不是dd里面的-->
    <p>000000</p>
    <a href="#">fff</a>
    <a href="#">dddd</a>
    <p>003</p>
</body>

2.样式优先级

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ADwFo7qO-1581061865737)(C:\Users\dell\Desktop\我的博客\QQ图片20200207154751.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9xgc4k2-1581061865739)(C:\Users\dell\Desktop\我的博客\xx.png)]$

拾玥花开

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复合元素选择器以及它们的权重关系

复合选择器以及权重1.复合选择器交集选择器：交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。**并集选择器:**是各个选择器通过逗号连接而成的。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们...
复制链接

扫一扫