📢 大家好,我是法医,不是验尸的法医,而是写代码的法医,哈哈😅,今天给大家带来玩转CSS基础之 层叠继承规则
层叠规则
CSS
是Cascsding Style Sheets的缩写,我们称为层叠样式表
,这暗示层叠(csscade)的概念是非常重要的。
当我们设置样式的时候,会使用各种各样的选择器
,有ID选择器
、类名选择器
、标签选择器
等等,什么选择器在层叠样式中胜出取决于三个因素,以下三个因素都是按照重量级顺序排列的,也就是常听到的权重
- 重要性(importance)
- 专用性(Specifity)
- 源代码次序(Source order)
下面将围绕以上三个因素展开
重要性
在CSS
中,有一个特别的语法可以让一条规则总是优于其他规则:!important
,首先我们需要知道有!important
的存在,这样当你在别人的代码中遇到时,你就很清楚它是什么。但是建议你千万不要使用它,除非你绝对必须使用它。有一种不得不使用它的一种情况是:当我们在修改某个组件库中样式时,我们不能编辑该组件核心的CSS模块,又或者你确实想要重写一种不能以其它方式覆盖的样式。
但是,如果你避免的话,还是不要使用!important
,因为!important
改变了层叠正常的工作方式,因此调式CSS问题,尤其是在大型样式表中,会变得非常困难。
专用性
如果我们在设置样式中没有使用!important
,此时轮到专用性
出场,那什么是专用性呢?专用性
是衡量选择器的具体程度的一种方法,主要是指它能匹配到多少元素,也就是权重值
元素选择器具有很低的专用性,而类选择器具有更高的专用性,所以类选择器
会战胜元素选择器
,ID选择器有甚至更高的专用性,所以ID选择器
会战胜类选择器
,战胜ID选择器的方法是在行间样式style中设置样式
或者设置!important
一个选择器具有的专用性的权重可以用四种不用的值来衡量,它们可以被认为是千位、百位、十位、个位表示
- 千位:如果样式声明式在style属性中该列加1,这样的声明没有选择器,所以它们的权重值总是1000,否则为0
- 百位:在整个选择器中每包含一个ID选择器就在该列加1
- 十位:在整个选择器中每包含一个类选择、属性选择器、或者伪类就在该列加1
- 个位:在整个选择器中每包含一个元素选择器或者伪元素就在该列加+
📢 需要注意的是通用选择器(*)
,复合选择器(+、>、~、空格)
和否定伪类(:not)
在专用性中不受影响
🌰 举个例子:
最终比较的是合计值,谁的值大,那么权重就大,样式就用谁,这样的话,还有一种情况,就是权重值相等的情况该如何处理?看第三部分
源代码次序
如果多个互相竞争的选择器具有相同的重要性和专用性(权重值),那么第三个因素会帮助决定哪一个规则获胜,也就是说,选择哪一个选择器取决于源代码顺序,最后一个设置样式将会覆盖之前设置的样式,如果没有声明样式的值,那么就会继承父级的设置的样式值
继承规则
继承 就是某个元素的一些属性值会由该元素的子元素继承,但是有些值是不会继承的,究竟哪些属性能够被子元素继承,可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance
CSS 为处理继承提供了四种特殊的通用属性值:
- inherit:继承父元素的值。
- initial:设置浏览器默认样式的值。
- unset
- revert
继承的就近原则: 由于属性值是继承而来,所以属性值会继承离自己最近的那个元素的属性值。