CSS选择器-优先级比较

不想说话,自己看图和代码注释,看了一天,很累的。

<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器的优先级别</title>
        <style type="text/css">
        /*
         CSS选择器:
         * 1. 在相同级别选择器:1.叠加原则  2.就近原则
         * 2. id选择器>类选择器 > 标签选择器
         * 3. 范围越小,优先级别越高
         * 注意:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
         * */
        
        
        /*标签选择器:
         
         * 遵循:就近原则/叠加原则
         * */
            div{
                color: red;
            }
            div{
                color: blue
            }
            div{
                color: green;
            }
            
            /*类选择器*/
            .text{
                color: yellow;
            }
            
            /*id选择器*/
            #tent{
                color: deeppink;
                font: "微软雅黑";
                font-size: 30px;
            }
            
            /*复合选择器*/
            div#tent{
                color: gold;
                font-size: 23px;
            }
            
            /*通配符:如果以上没有设置,则执行这个*/
            *{
                /*important:跳出规则,优先执行*/
                color: darkcyan!important;
            }
                        
        </style>
    </head>
    <body>
        <div id="tent" class="text"> 路人不知我心疼</div>
    </body>
</html>
选择器权值排表
界面效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容