组合选择器(从前往后匹配)

2018-06-22  本文已影响0人  逆_3ec2

1、后代选择器:
选择器之间用空格隔开
2、子代选择器
父子选择器之间,用 > 隔开(选择到的只能是儿子)
3、毗邻元素选择器
只能匹配到挨着的后一个元素,用 + 隔开
4、兄弟元素选择器(同级元素选择器)
匹配所有的兄弟元素,用 ~ 隔开

<style>
     .content p + p {
        color: blue; // 只有大胡子变蓝,毗邻元素被span给截断了。如果没有span,则是大胡子、夏蝉变蓝
     }
     content p ~ p {
        color: red; // 第一个p元素后面的所有p元素都变成红色,span对其没有影响,第一个p元素没有变红是因为没有其他的兄弟元素的兄弟元素是他(从前往后匹配)
     }
</style>
<div class="content">
     <p>风声</p>
     <p>大胡子</p>
     <span>朝歌</span>
     <p>青云</p>
     <p>夏蝉</p>
</div>

css选择器优先级和权重的计算

css权重

权值等级划分, 一般来说是划分4个等级:

第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;

第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;

第三等级:代表 class | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

上一篇 下一篇

猜你喜欢

热点阅读