CSS特性

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

CSS层叠性

在css样式中，与样式的调用顺序无关，与样式的定义顺序有关。

层叠性：浏览器解析CSS是从上至下，当CSS冲突时以最后定义的CSS为准

CSS继承性

继承性（顾名思义：子承父业）：子元素没有设置样式，那么该子元素受父元素的样式影响。

哪些属性可以继承？

color、width、text-开头的、line-开头的、font-开头的

• 这些关于文字样式的，都能够继承。
• 所有关于盒子的、定位的、布局的属性都不能继承。
• 继承性是从自己开始，直到最小的元素。
• 继承的特殊标签： a标签 标题标签（如h1）不会实现继承

CSS优先级

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

!important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符

权重是优先级的算法，具体怎么计算看下文。在考虑权重时，需要注意一些特殊情况：

• 继承的权重为0 ( 即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式 )
• 权重相同时，CSS遵循就近原则。排在最后的样式优先级最大，把前面的样式覆盖了。
• !important

!importan给一个属性提高权重，这个属性的权重就是无穷大。

 font-size:40px !important;

 错误的：
 font-size:40px; !important;    → 不能把!important写在外面
 font-size:40px important;      → 不能忘记感叹号

• !important 提升的是一个属性，而不是一个选择器
• !important 无法提升继承的权重，该是0还是0
• !important 不影响就近原则
• !important 做网站的时候，不建议使用，因为会让css写的很乱。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准，具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	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

数位之间没有进制

0,0,0,5 + 0,0,0,5 =0,0,0,10 
而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况

比较规则

• 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。

• 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。