CSS - 权重，样式优先级

最新推荐文章于 2022-10-09 16:04:05 发布

anchenhe9360

最新推荐文章于 2022-10-09 16:04:05 发布

阅读量240

点赞数

原文链接：http://www.cnblogs.com/allen2333/p/9003492.html

版权

关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。

遇到样式应用问题，计算一下权重就知道优先级。

具体规范入如下：
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大

注意

1. 权重能叠加但不能进位

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

2. 相同权重，就近原则（CSS的层叠性）

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

<style type="text/css">
    .c1 .c2 div{  
        color: blue;
    }
    div #box3{
        color:green;
    }
    #box1 div{
        color:yellow;
    }
</style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>

文字为yellow，因为div #box3 的权重为 0001 + 0010 = 0011；#box1 div 的权重为 0010 + 0001 = 0011；相同权重，但后者在下面，比较近，根据层叠性，黄色覆盖了绿色。

3. 继承样式的权重为0。

即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

        <style type="text/css">
            div p{   
                color:red;
            }
            #father{
                color:red!important;
            }
            p.c2{    
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p class="c2">
                字体是蓝色
            </p>
        </div>

继承来的!important权重变为0000，被.c2覆盖（.c2权重为0010，并且加上层叠性），所以不起作用。但是#father p就是 0000 + 0001 = 0001

转载于:https://www.cnblogs.com/allen2333/p/9003492.html

anchenhe9360

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS - 权重，样式优先级

关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。遇到样式应用问题，计算一下权重就知道优先级。具体规范入如下：specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。继承或者* 的...
复制链接

扫一扫