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