CSS选择器权重：规则与优先级
一、选择器权重基础
CSS选择器权重是一个用于确定哪个规则将被应用到元素的值。权重由四个部分组成：内联样式、ID选择器、类选择器和标签选择器，分别对应不同级别的优先级。权重值越高，优先级越大。
内联样式：权重值为1000，通常是在元素的
style属性中定义的样式。ID选择器：权重值为100，通过
#id来选择元素。类选择器、属性选择器、伪类选择器：权重值为10，如
.class、[attr]、:hover等。标签选择器、伪元素选择器：权重值为1，如
div、:before等。
二、权重的叠加
当多个选择器同时应用于一个元素时，它们的权重会叠加。例如，一个元素使用了类选择器和标签选择器，它们各自的权重值将相加，决定了哪个规则优先应用。
三、提升权重的方法
在实际开发中，我们有时需要提升某个规则的权重，以确保所需的样式被正确应用。这里介绍几种方法：
使用更具体的选择器：更具体的选择器具有更高的权重。例如，使用
.container .inner而不是.inner。使用ID选择器：尽量减少使用ID选择器，因为它们的权重相对较高。
使用
!important：在某些特定情况下，可以使用!important标记来强制应用某个样式，但要慎重使用，以免破坏整体样式层次。
四、权重的优先级
权重值越高的规则，优先级越高。然而，在不同权重相等的情况下，后声明的规则将覆盖先声明的规则。这是因为CSS是层叠的，后面的规则会覆盖前面的规则。
五、案例分析：权重的博弈
假设我们有以下CSS代码：
/* 标签选择器权重为1 */
div {
color: red;
}
/* 类选择器权重为10 */
.container {
color: blue;
}
/* ID选择器权重为100 */
#special {
color: green;
}
<div id="special" class="container">Hello, CSS权重！</div>
在这个例子中，div、.container 和 #special 三个选择器的权重相加，为111。然而，由于#special的规则出现在后面，最终的颜色将是绿色，因为后声明的规则覆盖了前面的规则。
总结：
CSS选择器权重是影响样式优先级的重要因素，它直接决定了哪个规则将被应用到元素上。通过了解选择器权重的计算规则，我们可以更加精确地控制样式的呈现效果。在实际开发中，适当提升权重、使用更具体的选择器以及合理使用!important标记，都可以帮助我们实现预期的样式效果。
