【CSS相关】CSS不同选择器的权重(CSS层叠的规则)（约293字）

CSS不同选择器的权重(CSS层叠的规则)

CSS选择器的权重规则可以总结如下：

1. !important规则：具有最高的优先级，优先级为最大。
2. 行内样式：通过 style 属性直接定义的样式具有较高的权重，优先级为 1000。
3. ID 选择器：每个 ID 选择器的权重为 100。
4. 类选择器、属性选择器和伪类选择器：每个类选择器、属性选择器或伪类选择器的权重为 10。
5. 元素选择器：每个元素选择器的权重为 1。

当应用多个选择器到同一个元素时，根据上述规则计算各个选择器的权重，具有较高权重的样式将被应用。如果存在权重相同的情况，则根据样式规则的先后顺序来决定哪个样式生效，后声明的样式会覆盖先声明的样式。

下面是一个权重计算的示例：

    /* 权重为 1 */
    div {
    }
    
    /* 权重为 10 */
    .class1 {
    }
    
    /* 权重为 100 */
    #id1 {
    }
    
    /* 权重为 101 (100 + 1) */
    #id1 div {
    }
    
    /* 权重为 11 (10 + 1) */
    .class1 div {
    }
    
    /* 权重为 21 (10 + 10 + 1) */
    .class1 .class2 div {
    }

根据权重的计算规则，选择器的权重越高，其样式优先级越高，将更有可能应用到对应的元素上。