CSSCSS样式的优先级

Posted 2022-08-30 厦门德仔

CSS样式的优先级

• • CSS样式的优先级
  • 如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

CSS样式的优先级

对于相同CSS起源来说，不同位置的样式其优先级也是不同的。一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了！important关键字的声明会拥有最高的优先级。
在实际开发中，如果作者设计网页字体颜色为14号黑色字体，而用户在浏览器里利用火狐浏览器的插件firebug修改页面字体为18号字体，那么浏览器该如何处理呢？
根据CSS层叠规则：作者设计的样式能够覆盖浏览器默认设置的样式，而用户在浏览器设置的样式可以覆盖作者的样式。同时,CSS根据样式的远近关系来决定层叠样式的优先级：在同等条件下，距离运用对象的距离越近就有较大的优先权，因而行内样式大于内部样式和外部样式。

如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

• 标签选择器：优先级加权值为1
• 伪元素或伪对象选择器：优先级加权值为1
• 类选择器：优先级加权值为10
• 属性选择器：优先级加权值为10
• ID选择器：优先级加权值为100
• 其他选择器：优先级加权值为0，如通配选择器等
  然后，以下面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是：
• 统计选择器中ID选择器的个数，然后乘以100
• 统计选择器中类选择器的个数，然后乘以10
• 统计选择器中的标签选择器的个数，然后乘以1

以此方法类推，最后把所哟有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大
对于由多个选择器组合而成的复合选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式，如果分值相同，则根据位置关系来判断，越靠越近对象的样式就拥有越高的优先级。

            h3color: #ff7300;                        /*加权值=1分 */
            .f14font-size: 14px;                       /*加权值=10分 */
            #headwidth: 960px;                         /*加权值=100分 */
            h3 .f14font-weight: bold;                  /*加权值=1分+10分=11分 */
            #head h2border: 1px solid #ff73;         /*加权值=100分+1分=101分 */
            div ppadding: 0 10px;                      /*加权值=1分+1分=2分 */
            div #headmargin: 0 auto;                   /*加权值=1分+100分=101分 */
            #head h2 spanfloat: right;                 /*加权值=100分+1分+1分=102分 */
            #head .f14 emfloat: right;                 /*加权值=100分+10分+1分=111分 */
            #head .f14 span emfloat: right;            /*加权值=100分+10分+1分+1分=112分 */
            #head div h2 .f12 span emcolor: #000;    /*加权值=100分+1分+1分+10分+1分+1分=114分 */