CSS三大特性

目录

• 层叠性
• 继承性
• 优先级

层叠性#

相同的选择器设置相同的样式，此时一个样式就会覆盖另一个样式。解决了样式冲突的问题。

层叠性原则

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行那个样式
• 样式不冲突，不会层叠

继承性#

CSS中子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

• 恰当的使用继承可以简化代码，降低CSS样式的复杂性
• 资源色可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

优先级#

当同一个元素指定多个选择器，就会有优先级产生。

• 选择器相同则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器	选择器权重
继承 或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
!important 重要的	无穷大

注意

1. 继承到的父标签中的样式的权重，在子标签这里永远是0
2. a标签在浏览器中会被浏览器默认定制一个样式，所以如果a标签继承父类样式会被浏览器默认的样式覆盖掉。

复合选择器的权重叠加

当使用复合选择器时i，这个选择器的权重等于复合选择器中的几个选择器的权重的和。

• div ul li ——————————> 0,0,0,3
• .nav ul li —————————–>0,0,1,2
• a:hover ——————————>0,0,1,1