对CSS选择器权重的认识(亲测)

对CSS选择器权重的认识是Web前端开发的一项重要知识点。CSS选择器权重（优先级）指定了在多个选择器同时匹配同一个元素时哪个规则应该被应用。

理解选择器权重的规则

CSS选择器权重由四个级别组成：内联样式（style属性）的权重最高，其次是ID选择器、类选择器、伪类选择器和属性选择器，再次是元素和伪元素选择器（如::before和::after），最后是通用选择器（如*）、子选择器（如>）和兄弟选择器（如+和~）。

当多个选择器同时匹配同一个元素时，选择器权重将决定哪一个规则将被应用。具有更高权重的规则将覆盖具有较低权重的规则。

一个简单的示例：

<div id="example" class="example">Hello World!</div>

<style>
    #example { color: red; }
    .example { color: blue; }
</style>

在上面的示例中，div元素同时匹配ID选择器#example和类选择器.example。由于ID选择器的权重高于类选择器，因此应用了color: red;规则，文本内容将以红色显示。

样式规则中选择器权重相等

当两个样式规则具有相同的选择器权重时，将采用CSS的“后者优先”规则，即后出现的规则将覆盖先出现的规则。下面是一个示例：

<div id="example">Hello World!</div>

<style>
    #example { color: red; }
    #example { color: blue; }
</style>

在上面的示例中，两个ID选择器的权重是相等的。根据CSS的“后者优先”规则，应用了后一个规则，文本内容将以蓝色显示。

嵌套规则的选择器权重

当一个样式规则包含嵌套规则时，要考虑所有选择器的权重。下面是一个示例：

<div id="example">
    <span>Hello World!</span>
</div>

<style>
    #example span { color: red; }
    .example span { color: blue; }
</style>

在上面的示例中，span元素同时匹配ID选择器#example span和类选择器.example span。由于ID选择器的权重高于类选择器，因此应用了color: red;规则，span元素的文本将以红色显示。

总之，理解CSS选择器权重的规则对于Web开发人员来说是非常重要的。在编写CSS代码时，要根据需要选择适当的选择器来实现所需的样式效果，并避免使用过于复杂或冗余的选择器。