CSS选择器权重计算和优化规则

前端面试 同时被 2 个专栏收录
39 篇文章 3 订阅
11 篇文章 0 订阅

1.CSS优先级:

!important > 行内样式 > ID选择器 > class选择器 || 属性选择器 > 标签选择器 > 通配符*

2.复杂嵌套中css样式权重的计算:

权重计算规则(下文数字均为虚拟数字,便于计算,并非真实数值)

  1. 行内(内联)样式:style="", 权重 1000;
  2. ID选择器,权重 100;
  3. 类、伪类、属性选择器,权重10;
  4. 标签选择器、类型选择器、伪元素选择器,如div p,权重1;
  5. 通配符、子选择器、相邻选择器,如*、>、+,权重 0;

计算示例:

​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #username{/*权重:100*1=100*/
            font-size: 14px;
            color: #333333;
        }
        #users_info #username{/*权重:100*2=200*/
            font-size: 15px;
            color: #1B6D85;
        }
        #users_info a{/*权重:100*1+1=101*/
            font-size: 16px;
            color: #398439;
        }
        .user_info #username{/*权重:100*1+10*1=110*/
            font-size: 17px;
            color: #66512C;
        }
        .user_info a{/*权重:10*1+1*1=11*/
            font-size: 18px;
            color: #843534;
        }
        #in_block .user_info #username{/*权重:100*2+10*1=210*/
            font-size: 19px;
            color: #8A6D3B;
        }
        .contain #in_block .user_info #username{/*权重:100*2+10*2=220*/
            font-size: 20px;
            color: #C7254E;
        }
        #content #in_block .user_info a{/*权重:100*2+10*1+1*1=211*/
            font-size: 21px;
            color: #F0AD4E;
        }
    </style>
    <body>
        <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;">
            <div id="in_block" class="left_content">
                <div class="user_info" id="users_info">
                    <a id="username">注意我的字体大小和颜色</a>
                </div>
            </div>
        </div>
    </body>
</html>
 
 
​

 

 

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值