层叠规则
CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的；
在最基本的层面上，它表明 CSS 规则的顺序很重要，但它比那更复杂；
什么 选择器 在层叠中胜出 取决于 三个因素（这些都是按重量级顺序排列的，前面的一种会否决后一种）：
- 重要性（Importance）
- 专用性（Specificity）
- 源代码次序（Source order）
重要性
在 CSS 中，有一个特别的语法可以让一条规则总是优先于其他规则 !important；
建议要使用它，除非必须使用它；不得不使用它的一种情况是，当你在修改某个组件样式时，不能编辑该组件核心的 CSS 模块，又或者确实想要重写一种不能以其他方式覆盖的样式；
但如果能避免的话，不要使用它；由于 !important 改变了层叠正常工作的方式，因此调试 CSS 问题，尤其是在大型样式表中，会变得非常困难；
专用性
-
专用性基本上是衡量选择器的具体程度的一种方法，主要是指它能匹配多少元素；
- 元素选择器 具有很低的专用性；
- 类选择器 具有更高的专用性，所以将战胜元素选择器；
- ID 选择器 有甚至更高的专用性, 所以将战胜类选择器，战胜 ID 选择器 的方法则是 style 中的样式或者 !important；
-
一个选择器具有的专用性的量可以用四种不同的值（或组件）来衡量的，它们可以被认为是 千位、百位、十位 和 个位 ，在四个列中的四个简单数字：
- 千位：如果声明是在 style 属性中该列加 1 分（这样的声明没有选择器，所以它们的专用性总是 1000）否则为 0；
- 百位：在整个选择器中每包含一个 ID 选择器 就在该列中加 1 分；
- 十位：在整个选择器中每包含一个 类选择器、属性选择器、或者伪类 就在该列中加 1 分；
- 个位：在整个选择器中每包含一个 元素选择器 或 伪元素 就在该列中加 1 分；
-
注：通用选择器 (*)、复合选择器（+、>、~、空格）和否定伪类（:not）在专用性中无影响；
-
举个例子：
选择器 千位 百位 十位 个位 合计值 h10 0 0 1 0001 #indentifier0 1 0 0 0100 h1 + p::first-letter0 0 0 3 0003 li > a[href*=”zh-CN“] > .inline-warning0 0 2 2 0022 没有选择器，规则在一个元素的 style 属性里 1 0 0 0 1000
源代码次序
-
如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜，也就是说，选择哪一个选择器取决于源码顺序，例如：
p { color: red; } p { color: blue; } -
不过有一点需要注意的是，当多个 CSS 规则匹配相同的元素时，它们都被应用到该元素中；只不过后面因为层叠规则被层叠掉了而已；
![]( "源代码次序")
继承规则
什么是继承
-
所谓继承，就是应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会；
-
CSS 为处理继承提供了四种特殊的通用属性值：
- inherit：继承父元素的值；
- initial：使用浏览器的默认值；如果浏览器默认样式表中没有设置值，那么该属性值就被设置为 inherit ，不被 IE 支持；
- unset：属性的值继承 inherit ，若 inherit 没有继承到值则继承 initial ，不被 IE 支持。
- revert：属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式；
继承的就近原则
-
由于属性值是由继承而来，所以属性值会继承离自己近的那个元素的属性，例如：
htmlcss<div class="one"> <div class="two"> <p>Lorem ipsum dolor sit amet.</p> </div> </div>.two { color: blue; } .one { color: red; } -
在上面的示例中 two 比 one 更加接近 p ，所以最终采用的是 two 的 color 值，段落呈现蓝色；
面试题
请简述 CSS 中的层叠规则
CSS 中当属性值发生冲突时，通过层叠规则来计算出最终的属性值，层叠规则可以分为 3 块：
- 重要性（Importance）：!important 设置该条属性值最重要，但是一般不推荐使用；
- 专用性（Specificity）：专用性主要是指它能匹配多少元素，匹配得越少专用性越高；
- 源代码次序（Source order）：在重要性和专用性都一致的情况下，属性值取决于源代码的先后顺序；
CSS 高级✍️ CSS 属性的计算过程
上一篇
