前端学习(11)~css学习(五)：样式表的继承性和层叠性
前端学习(11)~css学习(五)：样式表的继承性和层叠性
本文重点
- CSS的继承性
- CSS的层叠性
- 计算权重
- 权重问题大总结
- CSS样式表的冲突的总结
- 权重问题深入
- 同一个标签，携带了多个类名
- !important标记
CSS的继承性
我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
继承性是从自己开始，直到最小的元素。
我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
- 关于盒子、定位、布局的属性，都不能继承。
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
CSS的层叠性
层叠性：计算权重
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！
三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
- id 选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
针对上面这句话，我们接下来举一些复杂一点的例子。
层叠性举例
举例1：计算权重
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
举例2：权重相同时
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
举例3：具有实战性的例子
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的：
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
正确的做法是：（非常重要）
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：所有人当中，让某一个人为红，让其他所有人为蓝。
这种方式好用是好用，但用好很难。
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。
举例4：继承性造成的影响
如果不能直接选中某个元素，而是通过继承性影响的话，那么权重是0。
为了验证上面这句话，我们来看看下面这样的例子：
另外：如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的。举例如下：(box3 描述得最近，所以采用 box3 的属性)
上图，因为没有选中p，所以权重为0.
层叠性：权重计算的问题大总结（非常重要）
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
通过列举上面几个例子，我们对权重问题做一个总结。
上面这个图非常重要，我们针对这个图做一个文字描述：
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。