我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式。但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的???

css一定有自己的机制来处理这个问题,这个就是css的层叠性。今天我们就一起来具体讨论一下这个问题。

1.场景一:多个选择器选中同一个标签,怎么办?

首先我们写一段简单的html代码:

7层叠性.html(body部分)

     <div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我到底什么颜色的?</p>
</div>
</div>
</div>

注意给组件设置id和class时同名并不影响,因为一个是id,一个是类,本来就是不同的东西。

好,首先我们先在head标签里写如下一段css代码:

7层叠性.html(head部分)

     <style>
#box1 .box2 .box3 p{
color: red;
}
#box1 div.box2 div.box3 p {
color: green;
}
.box1 #box2 div p {
color: blue;
}
</style>

我们注意写下的这三个选择器有一个共同的特点,就是虽然写法不同,但最后都指向了p标签。那么这个时候浏览器显示出来的到底是什么颜色呢?

css有规定:当几个选择器同时指向同一个标签时,此时比较权重。权重就是特定选择器的个数(id选择器 > 类选择器 > 标签选择器)

我们可以分析一下上面三个选择器的权重: 

            id选择器个数    class选择器个数     标签选择器个数
                1                   2                     1
                1                   2                     3
                1                   0                     2

经过对比,应该是第二个选择器起作用,也就是颜色应该显示为绿色。我们在浏览器里查看一下实现效果:

【CSS】我的颜色到底听谁的?—— css的层叠性-LMLPHP

再打开谷歌的"检查"工具,看一下源代码

【CSS】我的颜色到底听谁的?—— css的层叠性-LMLPHP

另外两个选择器都被消掉,只留下绿色选择器还在。

总结:当几个选择器同时指向同一个标签时,此时比较权重,谁大听谁的!

2.场景二:权值相同,怎么办?

7层叠性.html(head部分)

     <style>
.box1 #box2 .box3 p {
color: red;
}
#box1 .box2 .box3 p {
color: green;
}
.box1 .box2 #box3 p {
color: blue;
}
</style>

更改css部分,我们发现这三个选择器同样指向了同一个标签,所以处理办法依旧是比较权重,好,开始分析

                                id选择器个数    class选择器个数     标签选择器个数
                                    1               2                   1
                                    1               2                   1
                                    1               2                   1

结果我们发现虽然指向同一个标签,但是他们权重相同,这个时候我又该听谁的呢??

css规定:当几个选择器同时指向同一个标签时,如果权重相同,那么依照书写顺序,谁写在后面听谁的。

因此我们推断应该是蓝色。看一下实现效果:

【CSS】我的颜色到底听谁的?—— css的层叠性-LMLPHP

把上面两个例子进行一个总结:当几个选择器同时指向同一个标签时,首先比较权重,谁大听谁的,如果权重相同,那么依照书写顺序,谁写在后面听谁的。

3.场景三:样式都是继承来的,怎么办?

保持html代码不变,我们再次更改css代码

7层叠性.html(head部分)

     <style>
#box1 {
color: red;
}
.box1 #box2 .box3 {
color: pink;
}
.box1 .box2 {
color: green;
} </style>

其中这三个选择器都没有直接指到p标签,但是都选择了p标签的祖辈标签,从上一篇随笔中我们知道css具有继承性,P标签会继承父类的样式。那么问题来了,每个父辈样式不同,p该继承谁呢?其实这个问题很好想象,你是向你爸爸多一些,还是你爷爷多一些?还是你祖爷爷多一些?

css规定:当三种选择器都没有直接选择元素,通过继承让p拥有属性, 此时看谁描述的近,就听谁的。

所以一次判断,应该是父标签的颜色,也就是粉色。我们看一下实现效果检查一下:

【CSS】我的颜色到底听谁的?—— css的层叠性-LMLPHP

4.场景四:描述一样近,怎么办?

Q:那么如果描述的一样近呢?我们又该听谁的?

保持html代码不变,更改css代码

7层叠性.html(head部分)

     <style>
#box1 .box2 #box3 {
color: red;
}
.box1 .box2 .box3 {
color: green;
}
.box1 #box2 #box3 {
color: blue;
}
</style>

此时三个选择器都选择到p标签的父标签,描述的一样近,根据经验,这时候我们又该比较什么??对,跟之前例子类似,此时又要比较权重。现在比较的方法又和之前例子是类似了。

css规定:当三种选择器都没有直接选择元素,通过继承让p拥有属性, 此时看谁描述的近,就听谁的。假如描述的一样近,此时再比较权重, 权重谁高就听谁的。若权重相同,谁在后面听谁的。

实现效果:

【CSS】我的颜色到底听谁的?—— css的层叠性-LMLPHP

自己比划一下,是不是能够想明白为什么是蓝色????如果可以,说明对这一块是彻底理解了。

5.总结

以上就是关于css层叠性的知识,最后总结一下:

  1.当几个选择器同时指向同一个标签时,首先比较权重,谁大听谁的,如果权重相同,那么依照书写顺序,谁写在后面听谁的。

  2.当几个选择器都没有直接选择元素,通过继承拥有属性, 此时看谁描述的近,谁近就听谁的。假如描述的一样近,此时再比较权重,谁大听谁的。若权重相同,谁在后面听谁的。

05-11 22:19