css选择器权重排序_前端学习随笔5 选择器的层叠（优先级）与继承

随笔3中已经讲过选择器概念及分类，下面主要讨论以下选择器的优先级，说到这里就需要了解一下CSS层叠和继承的概念。

一 层叠

CSS全称是 Cascading Style Sheets，中文译名为层叠样式表，其说明层叠是十分重要的，那层叠的规则是什么呢？难道就是后面声明的样式覆盖前面声明的样式？

通过MDN文档中的描述，我们可以知道层叠次序取决于三个因素：

1. 重要性(importance)
2. 专用性(Specificity)
3. 源代码次序(Source order)

1 重要性

当属性值后面加了代码 !important时，这条语句将会优先于其他语句，不管其出现在哪里。但是我们十分不推荐使用它，因为其过于特殊，不能被其他样式覆盖，在调试和修改css的时候变得非常困难。

2 专用性

专用性可以理解成选择器的权重，权重越高，优先级越高，以下是各种选择器的优先级权重表

注：组合选择器是将其包含的选择器权重相加，例如组合选择器p #test的权重为100+1=101。

3 源代码次序

多个相互竞争的选择器具有相同的重要性和专用性，那么以哪个为准呢？法则简单粗暴——后来者居上(靠后定义的属性值生效)。

4 总结

由以上我们可以看出，有!important的优先级最高；没有!important看权重，权重高的优先；没有!important而且权重相同，那就后来者居上

二 继承

讲到这里我们已经明白了CSS样式的优先级，那问题又来了，如果一个元素我没有定义某个属性的具体属性值例如font-size,那这个元素以多大的字体表现呢？css中有两种途径来获取该属性值：

1. 默认的属性值——在css中，元素属性值都会有一个默认值，如果你不设定，那么就会按照默认值来
2. 继承——通过继承来获取元素属性值

css处理继承有以下几个通用属性值：

1. inherit：选定元素属性值与其父元素相同
2. initial：选定元素属性值与浏览器默认样式表相同；若默认无值，则继承父元素属性值
3. unset：重置为自然值
4. revert：属性值被设置成自定义样式所定义的属性(如果被设置)， 否则属性值被设置成用户代理的默认样式

注：自然值的概念——如果属性能继承，那么该自然值为自然继承值；如果该属性不能继承，那么自然值为浏览器默认值。

注：有些属性的能继承，有的不能继承。具体内容请参考相关文档