CSS - CSS的特性

1. CSS三大特性

1.1 CSS层叠性

指多种CSS样式叠加。

浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候的一个属性就会将另一个属性层覆盖掉。

一般情况下，如果出现样式冲突，则会按照CSS书写顺序，以最后的样式为准。

1.2 CSS继承性

指书写CSS样式表时，子标签会继承父标签的某些些样式。

想要设置一个可继承的属性，只需将它应用于父元素。

注意：

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

1.3 CSS优先性

定义CSS样式时，经常出现两个或更多规则应用在同意元素上，这就会出现优先级问题。

注意特殊情况：

1. 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，其他权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
2. 行内样式优先。应用style属性的元素，其行内样式的权重非常高。
3. 权重相同时，CSS遵行就近原则，排在最后的样式的优先级最大。
4. CSS定义了一个 !important 命令，该命令赋予最大的优先级。也就是说不管权重如何以及样式位置的远近， !important 都具有最大优先级。

2. CSS特殊性（Specificity）

CSS Specificity，称为CSS特性或非凡性，是一个衡量CSS值优先级的一个标准。

specificity用一个四位的数字串来表示，从左到右，左面的最大，一级大于一级，数位之间没有进值，级别之间不可跨越。

样式	贡献值
继承或者*	0，0，0，0
每个元素（标签）	0，0，0，1
每个类，伪类	0，0，1，0
每个id	0，1，0，0
每个行内样式	1，0，0，0
每个 !important	∞无穷大

权重可以叠加，如：

div ul li				------>				0,0,0,3
.nav ul li				------>				0,0,1,2
a:hover					------>				0,0,1,1
.nav a					------>				0,0,1,1
#nav p					------>				0,1,0,1