CSS之三大特性（十）

众所周知，CSS具有三大特性，分别是：继承性、层叠性、优先级，这些特性对于我们日常开发来说极为重要，如果我们平时在编写代码时，总是会出一大堆bug，那可能就是这三个特性没有理解到位，所以要写出优质的代码，这三个特性是必须要理解的👻

1、CSS继承性

1.1、什么是CSS继承性

CSS的继承性是指 特定的CSS属性 会向下传递到子孙元素。

1.2、CSS继承性遵循"就近原则"

如果元素自身没有设置这个可继承的属性，则会向他的父元素继承，如果父元素没有，则一层层向上找，如果找不到，就以默认的样式显示。
 
设置继承性的三个值：

• initial >设置属性值和浏览器默认样式相同；
• inherit >属性值默认继承父元素；
• unset >是关键字initial和inherit的组合，如果属性有继承性，则继承父元素，没有则为默认值。

1.3、可继承和不可继承属性

可继承属性： 文本相关的属性普遍具有继承性，只需要给 祖先标签 设置，即可在后代所有标签中生效，如下：
 

• 字体系列：font-size，font-family，font-style，font，font-weight
• 文字系列：color，text-align，text-indent，line-height，word-spading，letter-spacing，text-transform
• 列表布局属性：list-style，list-style-type，list-style-image，list-style-position等
• 光标属性：cursor（光标显示为何种形态）
• 元素可见性：visibility（控制元素显示和隐藏）
   

不可继承属性： a标签的color值默认不继承

• 盒子模型：display，margin，border，height，min-height，max-height，width,min-width，max-height
• 定位相关：position，left，right，top，bottom，z-index
• 浮动：float，clear
• 其它：background，overflow，table-layout，vertical-align，page-break-after，page-bread-before和unicode-bidi

1.4、line-height的继承性

父元素 line-height 值	继承规则	子元素的 line-height 值
50px	直接继承该值	50px
2	直接继承该比例	2
200%	继承%百分比计算后的值	如果父元素 font-size:20px ，则子元素计算得到40px

2、层叠性

2.1、CSS层叠性解读

所谓的层叠性是指多个CSS规则可以同时作用于同一个标签，效果 叠加，并不完全 覆盖；
 
不同选择器作用于同一元素，不同属性会 叠加，相同属性会 覆盖；
 
在 覆盖 时需要遵循以下原则： 就近原则 和 优先级。
 
就近原则：当两个或多个 同级别 的选择器作用到同一个元素时，如果出现相同的属性，则以写在后面的选择器中的属性为主。
 
优先级：当两条或多条规则（选择器）作用到同一个元素时，如果出现相同的属性，则以 优先级高 的为实际效果。

2.2、层叠性的冲突处理

不同CSS规则集同时作用于同一个标签，不同属性会叠加，相同属性会覆盖；
 
相同属性覆盖，首先需要计算选择器的权重，最后以选择器权重高的为主；
 
如果选择器权重相同，则写在后面的会覆盖写在前面的；
 
如果想要实现的效果，因为选择器权重低而不生效，则通过提升选择器权重来达到效果。

3、优先级

当多个CSS规则集作用到同一个元素时，相同属性会发生覆盖，浏览器通过 选择器的优先级 来判断以哪个选择器中的属性值为主，从而在该元素上应用这些属性值。

3.1、选择器类型的权重

选择器的类型	实例	选择器权重	等级
!important	div{color:red !important}	无穷大	特级
行内样式	style='color:red'	1000	第一等级
id选择器	#id	0100	第二等级
class，伪类，属性选择器	.box，:hover，[type='text']	0010	第三等级
标签选择器，伪元素选择器	div，::after，::before	0001	第四等级
通配符，子选择器，相邻选择器等	*，>，+，-	0000
继承的样式		0000

注：*通配符的权重实际是要大于继承的样式的！

3.2、选择器优先级计算

优先级就是分配给指定的CSS声明的一个权重；
 
选择器的优先级是由选择器中的每一种 选择器类型的数值（权重） 相加的最终结果来决定；
 
一个选择器的优先级是由四个部分相加计算得来的（数值越大，选择器的优先级越高）。

如下是选择器的权重计算规则：

选择器	千位	百位	十位	个位	优先级
内联样式	1	0	0	0	1000
div p	0	0	0	2	0002
#box div p	0	1	0	2	0102
.box .item h3	0	0	2	1	0021
.box:hover p	0	0	2	1	0021

注意：

在选择器权重计算时不允许进行进位；
 
无论多少个类选择器的权重叠加，都不会超过一个id选择器，以此类推；
 
在比较选择器优先级时，从左往右比较，一位一位比较，如果千位不相同，以大的为主，如果千位相同，则比较下一位，以此类推。

3.3、!important提升权重

当在一个样式声明中使用一个 important 规则时，此声明将覆盖任何其它声明；
 
从技术上讲， important 与优先级无关，但它与最终的结果直接相关；
 
慎用!important
 
当我们需要重写用 !important 声明的样式时，会发现根本无效；
 
但是在自定义字体时需要用到 !important。

3.4、总结

首先要找到，有哪些选择器在控制标签元素的样式，然后按一下5步来分析，最终生效的CSS声明：
 
第一步：找有没有带 !important 关键词的CSS声明，有就一定以它为主，没有则看第二步
 
第二步：找有没有行内样式，有则以行内样式为主，没有看第三步
 
第三步：看选择器的优先级，优先级高的为主，如果优先级相同，则看第四步
 
第四步：优先级相同，以写在后面的为主，如果没有选择器作用于当前标签，则看第五步
 
第五步：看此CSS属性是否具有继承性，如果有，则继承父元素的样式，如果没有，则以默认样式显示

---

上一篇文章	下一篇文章
CSS之盒模型（九）	CSS之定位（十一）