?大家好，我是法医，不是验尸的法医，而是写代码的法医，哈哈?，今天给大家带来玩转CSS基础之层叠继承规则
层叠规则CSS是CascsdingStyleSheets的缩写，我们称为层叠样式表，这暗示层叠（csscade）的概念是非常重要的。
当我们设置样式的时候，会使用各种各样的选择器，有ID选择器、类名选择器、标签选择器等等，什么选择器在层叠样式中胜出取决于三个因素，以下三个因素都是按照重量级顺序排列的，也就是常听到的权重
重要性（importance）
专用性（Specifity）
源代码次序（Sourceorder）
下面将围绕以上三个因素展开
重要性在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
继承的就近原则：由于属性值是继承而来，所以属性值会继承离自己最近的那个元素的属性值。
?以上就是CSS层叠继承规则，现在你懂了嘛？欢迎大家关注此专栏，我会一直更新下去。??♀?
原文：https://juejin.cn/post/7101699661659897863
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场