【WEB前端】CSS继承性和层叠性(极度重要)

时间:2021-05-24 13:02:22

1.1 继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。

所以,如果我们的页面的文字,都是灰色,都是14px。那么就可以利用继承性:

1    body{
2 color:gray;
3 font-size:14px;4 }

继承性是从自己开始,直到最小的元素。

1.2 层叠性

CSS异常冲突处理能力---层叠性。

层叠性:就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题!

CSS像艺术家一样优雅,像工程师一样严谨。

当选择器,选择上了某个元素的时候,那么要这么统计权重:

id的数量,类的数量,标签的数量

【WEB前端】CSS继承性和层叠性(极度重要)

如果权重一样,那么以后出现的为准:

【WEB前端】CSS继承性和层叠性(极度重要)

如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。

如果大家都是0,那么有一个就近原则:谁描述的近,听谁的。

1.3 同一个标签,携带了多个类名,有冲突:

1        <p class="spec1 spec2">我是什么颜色?</p>
2 <p class="spec2 spec1">我是什么颜色?</p>

和在标签中的挂类名的书序无关,只和css的顺序有关:

1            .spec2{
2 color:blue;
3 }
4 .spec1{
5 color:red;
6 }
7 </style>

1.4 !important标记

1        <style type="text/css">
2 p{
3 color:red !important;
4 }
5 #para1{
6 color:blue;
7 }
8 .spec{
9 color:green;
10 }
11 </style>

mportant是英语里面的“重要的”的意思。我们可以通过语法:

1           k:v !important;

来给一个属性提高权重。这个属性的权重就是无穷大。

!important需要强调3点:

1) !important提升的是一个属性,而不是一个选择器

1            p{
2 color:red !important; → 只写了这一个!important,所以就字体颜色属性提升权重
3 font-size: 100px ; → 这条属性没有写!important,所以没有提升权重
4 }
5 #para1{
6 color:blue;
7 font-size: 50px;
8 }
9 .spec{
10 color:green;
11 font-size: 20px;
12 }

2) !important无法提升继承的权重,该是0还是0

         <div>
<p>哈哈哈哈哈哈哈哈</p>
</div>
1          div{
2 color:red !important;
3 }
4 p{
5 color:blue;
6 }

由于div是通过继承性来影响文字颜色的,所以!important无法提升它的权重,权重依然是0。

干不过p标签,因为p标签是实实在在选中了,所以字是蓝色的(以p为准)。

3)!important不影响就近原则

总结

【WEB前端】CSS继承性和层叠性(极度重要)