CSS 之层叠规则（权级、权重、顺序）详解

CSS层叠规则主要指的是多个CSS规则应用在同一元素上时，决定哪个规则生效的过程。这涉及到几个关键因素：权重、顺序和层叠。

1. 权重：

   • 内联样式（行内样式）：1,0,0,0
   • ID 选择器：0,1,0,0
   • 类选择器、属性选择器等：0,0,1,0
   • 元素选择器：0,0,0,1
   • 通配选择器：0,0,0,0
   • 继承的样式：没有权重值

当比较权重时，按照四位数字从左到右进行比较，如果某一位数字相同，则比较下一位数字。

2. 顺序：

   • 同权重规则下，后定义的样式会覆盖先定义的样式。
   • 如果使用了!important，它会覆盖任何权重，无论位置靠后还是靠前。

3. 层叠：

   • CSS解析器会根据选择器的特异性和在样式表中的位置来决定哪个属性值是最终的。
   • 当同一选择器应用于相同元素且都含!important时，浏览器将遵循!important规则。

例子：

/* 内联样式 */
span { color: red; } /* 权重为：0,0,0,1 */
 
/* ID 选择器 */
#mySpan { color: blue !important; } /* 权重为：0,1,0,0，!important覆盖 */
 
/* 类选择器 */
.myClass { color: green; } /* 权重为：0,0,1,0 */
 
/* 应用于同一元素的选择器，后定义的覆盖先定义的 */
span { color: black; } /* 权重为：0,0,0,1，由于顺序，不会被应用 */

HTML中使用这些样式的元素：

<span id="mySpan" class="myClass">这是一个文本。</span>

在这个例子中，元素最终的颜色将是蓝色，因为ID选择器的!important规则覆盖了其他所有规则。