选择器的权重

2022-05-08 22:34:34 阅读：158 来源： 互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器的权重</title>
        <style>
        /*        
                当我们使用不同的选择器选择了相同的元素，又为其同一个样式设置了不同的值，
                    此时就发生了样式的冲突
                发生样式冲突时，显示那个样式，由选择器的权重决定，权重高的优先显示，这其中
                    内联样式的优先级是最高的，一旦设置则无法在样式表中修改，如果为一个样式添加
                    了!important则该样式会获得最高的优先级，将会优先于所有的样式显示（慎用）
                        内联样式 1000
                        id选择器 100
                        类和伪类  10
                        元素      1
                        通配选择器 0
                        继承来的样式，没有优先级
                
                对于复合选择器来说，需要将所有的选择器的优先级相加然后在比较
                    优先级计算时不会超过其最大的数量级，分组选择器中的优先级是独立计算的
                    如果两个选择器的优先级相同，则使用靠下的样式
        */
            p{
                color: red !important;
            }
            
            div{
                background-color: red;
            }
            #bootom{
                background-color: blue;
            }
            .box{
                background-color: yellow;
            }
            
            *{
                color: black;
            }
        </style>
    </head>
    <body>
        <p style="color: #00FFFF;">我是p元素</p>
        <div id="bootom" class="box">
            我是div
        </div>
    </body>
</html>

标签：优先级,权重,样式,color,background,选择器
来源： https://www.cnblogs.com/YcxyH/p/16247261.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

选择器的权重