CSS选择器权重解析与优先级规则

本文将深入探讨CSS选择器的权重与优先规则，这是理解CSS样式层叠和覆盖的关键。在CSS中，不同的选择器有不同的权重，决定了它们定义的样式何时生效。当多个选择器同时作用于一个元素时，具有更高权重的选择器所定义的样式将优先应用。 首先，权重分为四个等级： 1. 第一等：内联样式，如`style="..."`，权重为1000。这是最高权重，直接在HTML元素内部设置的样式。 2. 第二等：ID选择器，如`#content`，权重为100。用于唯一标识页面上的特定元素。 3. 第三等：类、伪类和属性选择器，如`.content`，权重为10。适用于一组相似元素。 4. 第四等：类型选择器和伪元素选择器，如`div p`，权重为1。用于指定元素类型或元素状态。 计算选择器的权重时，将每个等级的选择器数量乘以其权重，然后将各等级的值相加。例如，选择器`#NAV.ACTIVE`的权重是100（ID选择器）+ 10（类选择器）= 110。 值得注意的是，通用选择器（`*`）、子选择器（`>`）和相邻同胞选择器（`+`）的权重为0，它们不会影响计算。 现在，让我们看一个示例，分析以下CSS规则： 1. `#content div#main-content h2` - 权重：100 (ID) + 100 (ID) + 1 (类型选择器) = 201 2. `#content #main-content > h2` - 权重：100 (ID) + 100 (ID) + 0 (子选择器) = 200 3. `body #content div[id="main-content"] h2` - 权重：1 (类型选择器) + 100 (ID) + 100 (ID) + 1 (属性选择器) = 202 4. `#main-content div.paragraph h2` - 权重：100 (ID) + 10 (类) + 10 (类) + 1 (类型选择器) = 121 5. `#main-content [class="paragraph"] h2` - 权重：100 (ID) + 0 (属性选择器) + 10 (属性选择器) = 110 6. `div#main-content div.paragraph h2.first` - 权重：1 (类型选择器) + 100 (ID) + 100 (ID) + 10 (类) + 10 (类) + 1 (类) = 221 基于这些权重，HTML代码中的标题颜色顺序将是： 1. `#content div#main-content h2` - 颜色：红色（201权重） 2. `body #content div[id="main-content"] h2` - 颜色：绿色（202权重，覆盖红色） 3. `#main-content div.paragraph h2.first` - 颜色：粉色（221权重，覆盖绿色） 这个例子展示了如何根据选择器的权重来确定CSS样式的优先级。了解这一规则对于解决样式冲突和确保样式正确应用至关重要。在实际开发中，明智地使用选择器权重可以避免不必要的复杂性和潜在的问题。