CSS 三大特性——层叠性、继承性以及优先级

CSS三大特性

• CSS的三大特性分别是：层叠性、继承性以及优先级。

层叠性

• 定义：相同选择器设置相同的样式，此时其中一个样式会覆盖另一个冲突的样式。
• 作用：解决样式冲突的问题。
• 层叠性原则：当发生样式冲突时，遵循就近原则。

继承性

• 定义：子标签会继承父标签的某些样式。

• 作用：降低CSS样式的复杂性。

• 子元素可以继承父元素的样式包括：text-、font-、line-这些元素开头的属性以及color属性。

优先级

• 产生缘由：同一个元素被指定了多个选择器。

1. 选择器相同，则执行层叠性
2. 选择器不同，则根据选择器的权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important	∞

• 注意点：

1. 权重是由4组数字组成，但是永远不会有进位。简单理解就是，类选择器永远大于元素选择器。

2. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

3. 如果是复合选择器，则会有权重的叠加，需要计算权重。

   比如：div ul li ——> 0,0,0,3 ; .first ul li ——> 0,0,1,2 ; a:hover ——> 0,0,1,1

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！