随笔3中已经讲过选择器概念及分类，下面主要讨论以下选择器的优先级，说到这里就需要了解一下CSS层叠和继承的概念。
一 层叠
CSS全称是 Cascading Style Sheets，中文译名为层叠样式表，其说明层叠是十分重要的，那层叠的规则是什么呢？难道就是后面声明的样式覆盖前面声明的样式？
通过MDN文档中的描述，我们可以知道层叠次序取决于三个因素：
- 重要性（importance）
- 专用性（Specificity）
- 源代码次序（Source order）
1 重要性
当属性值后面加了代码 !important时，这条语句将会优先于其他语句，不管其出现在哪里。但是我们十分不推荐使用它，因为其过于特殊，不能被其他样式覆盖，在调试和修改css的时候变得非常困难。
2 专用性
专用性可以理解成选择器的权重，权重越高，优先级越高，以下是各种选择器的优先级权重表
| 选择器 | 权重 |
|---|---|
| 内联样式（无选择器） | 1000 |
| id选择器 | 100 |
| 类选择器/属性选择器/伪类 | 10 |
| 元素选择器 | 1 |
注：组合选择器是将其包含的选择器权重相加，例如组合选择器p #test的权重为100+1=101。
3 源代码次序
多个相互竞争的选择器具有相同的重要性和专用性，那么以哪个为准呢？法则简单粗暴——后来者居上（靠后定义的属性值生效）。
4 总结
由以上我们可以看出，有!important的优先级最高；没有!important看权重，权重高的优先；没有!important而且权重相同，那就后来者居上
二 继承
讲到这里我们已经明白了CSS样式的优先级，那问题又来了，如果一个元素我没有定义某个属性的具体属性值例如font-size,那这个元素以多大的字体表现呢？css中有两种途径来获取该属性值：
- 默认的属性值——在css中，元素属性值都会有一个默认值，如果你不设定，那么就会按照默认值来
- 继承——通过继承来获取元素属性值
css处理继承有以下几个通用属性值：
- inherit：选定元素属性值与其父元素相同
- initial：选定元素属性值与浏览器默认样式表相同；若默认无值，则继承父元素属性值
- unset：重置为自然值
- revert：属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式
注：自然值的概念——如果属性能继承，那么该自然值为自然继承值；如果该属性不能继承，那么自然值为浏览器默认值。
注：有些属性的能继承，有的不能继承。具体内容请参考相关文档
网友评论