CSS 第003篇优先级和权重计算_dw优先级权重计数值-CSDN博客

本文链接：https://blog.csdn.net/ml_ysy/article/details/109481756

>1 优先级

首先，说CSS文件内容位置的优先级，前文提到的四种导入样式的优先级：

行内样式>嵌入样式>外联样式表>导入样式表

其次，选择器的优先级，数字越大优先级越高：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

经验法则：

Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important

>2 权重计算

A:内联样式表的权值最高 1000
B:ID 选择器的权值为 100
C:Class 类选择器的权值为 10
D:HTML 标签选择器的权值为 1
权重 = A+B+C+D

下面这段代码的权值进行比较得出：em 显示蓝色。

<html>    

    <head>    

        <style type="text/css">    

            #redP p {    

                        /* 权值 = 100+1=101 */    

                        color:#F00;  /* 红色 */    

                    }    

            #redP .red em {    

                                /* 权值 = 100+10+1=111 */    
        
                                color:#00F; /* 蓝色 */    

                            }    

            #redP p span em {    

                                /* 权值 = 100+1+1+1=103 */    

                                color:#FF0;/*黄色*/    

                             }    
        </style>    

    </head>    

    <body>    

        <div id="redP">   

            <p class="red">red   

                <span><em>em red</em></span>    

            </p>    

            <p>red</p>    

        </div>    

    </body>   

</html>