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

1.1 继承性

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

哪些属性能继承？

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

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

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

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

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

1.2 层叠性

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

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

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

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

id的数量，类的数量，标签的数量

如果权重一样，那么以后出现的为准：

如果不能直接选中某个元素，通过继承性影响的话，那么权重是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不影响就近原则

总结