CSS权重计算

 一. 权重计算

1. 第一优先级：!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
2. 第一等：内联样式，如：style=“color:red;”，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
3. ）第二等：ID选择器，如：#header，权值为0100.
4. 第三等：类、伪类、属性选择器, 如：.bar， 权值为0010.
5. 第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
7.  继承的样式没有权值

二、权重计算原则

 1、 重要性声明 (!important)：

        使用 !important 声明的样式具有最高优先级，权重可视为 10000，这可以覆盖任何其他权重的样式，但应谨慎使用，因为它会使得样式难以维护。

 2、 内联样式：直接在HTML元素的style属性中定义的样式，权重为 1000。

 3、 选择器类型：

        ID选择器 (`#id’)：权重为 0100（或简单记为100）。类选择器 (.class)、属性选择器 ([attribute]) 和伪类 (:hover, :nth-child(), etc.)：权重为 0010（或简单记为10）。

元素选择器 (div, p, etc.) 和伪元素 (::before, ::after)：权重为 0001（或简单记为1）。

通用选择器 (*)、子选择器 (>)、相邻兄弟选择器 (+)、以及后续兄弟选择器 (~)：权重为 0000，但在实际计算权重时不计入，因为它们不影响权重值。

  4、 计算规则：

        计算选择器中各类选择器的数量，然后将它们对应的权重值相加得到总权重。

如果两个选择器的权重计算结果相同，则后出现的样式（源顺序上更靠近元素的样式）会覆盖之前的样式（遵循层叠原则）。

  5、就近原则

三、举例说明CSS权重计算规则

示例1：

html代码

 css样式

输出结果

根据权重规则计算3， #test2Id .test3 > .test3 > span，颜色是green

示例2：

html代码

 css样式

输出结果

根据权重规则计算2，颜色blue

 示例3：

html代码

 css样式

输出结果

根据权重规则计算5，颜色gray

 示例4：

html代码

 css样式

输出结果

根据权重规则计算1，颜色yellow