提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

CSS权重计算

计算CSS 权重
2023-06-13 09:12:15 时间

在没有引入权重的概念时，我们对css的优先级认识是这样的 !important>行内样式>ID>类/伪类|属性>标签 排在最前面的优先级越高。 但css是有权重机制的，css的优先级都是根据权重推算出来 如下表格 用四位数字来表示，分别表示四个级别，从左到右不断递减（排在前面的越大）

Name

0，0，0，0，(贡献值)

标签

0，0，0，1

类/伪类

0，0，1，0

ID

0，1，0，0

行内式

1，0，0，0

!import

无穷大

根据上图，我们可以轻易的看出他们的优先级，根据其贡献值（1）的排列位置得出

1的位置越前面，优先级越高

!important>行内样式>ID>类/伪类|属性>标签

我们来写一下代码，看是否是这样的

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            /* 0，0，0，1*/
            color:red;
        }
        .color {
            /*0，0，1，0*/
            color:green
        }
        #ches {
            /*0，1，0，0*/
            color:blue;
        }
    </style>
</head>
<body>
    <div id="ches" class="color" style="color:gray">
        测试测试测试测试
    </div>
</body>
</html>

浏览器显示结果，符合我们的上述规则

根据上面表格我们自动!important的级别最大，测试代码

div {
/* 0，0，0，1*/
color:red!important;    
        }

我们知道标签选择器的权重值最低，但加了!important之后变成了无穷大

权重叠加

css中权重是可以叠加的，如常见的导航栏布局

li{
    /*0，0，0，1*/
    color:red;
}

我们知道标签选择器的权重最低，但这里没有比他更大的选择器了，所以正常显示红色，但经过权重叠加后

li{
/*0，0，0，1*/
    color:red;
}
ul li {
    /*权重叠加之后 0，0，0，2*/
    color:green;
}

由图可见列表变成了绿色，这是因为权重叠加的问题 ul 的权重为 0，0，0，1 li 的权重为 0，0，0，1 两个叠加后：0，0，0，2 所以 ul li选择器优先于li选择器

注意：继承的权重为0

写一个例子，证明继承的权重为0；

.color {
    color:red;
}
<nav class='color'>
    <ul>
        <li>继承过来的权重为0</li>
    </ul>
</nav>

以上代码 li的颜色是什么？答案肯定是红色，li没有设置颜色，先去父元素ul上找，发现也没有设置颜色，最后在父父元素nav应用了颜色，这里是继承过来的颜色，上面我们说了，继承的权重为0 如何验证这句话，很简单，给li标签添加一个颜色；

.color {
    color:red;
}
li {
     color:blue;
}
<nav class='color'>
    <ul>
        <li>继承过来的权重为0</li>
    </ul>
</nav>

猜想一下li会是什么颜色？通过“权重表”我们知道 类的权重值为 0，0，1 ，0 标签的权重值为 0，0，0，1 既然标签的权重值最低，那么优先级肯定是类优先于标签 打开浏览器查看结果

额。。。好像跟我们猜想的不一样，按照优先级顺序不是应该显示红色吗？ 这就验证了“继承的权重为0”这句话，当li继承nav发生了颜色改变，此时的nav权重为 0，0，1，0，但li的权重会变为0； 但我们中又给li单独设置了样式，此时 li的权重为 0，0，0，1 0，0，0，1>0，0，0，0所以结果显示蓝色

接下来练习几到题，巩固一下权重

#father #son{
    color:blue;
}
#father p.c2{
    color:black;
}


div.c1 p.c2{
    color:red;
}
#father{
    color:green !important;
}
//html
<div id="father" class="c1">
    <p id="son" classs="c2"> 猜想一下这行字体是什么颜色 </p>
 </div>

先上结果---蓝色 分析：

1.首先排除红色的选择器，因为类的权重最低，这里又出现了ID

2.或许你会选择绿色，因为有一个!important他的权重最高，但你忘了，继承的权重为0，这里是继承p是继承div的颜色，上面代码肯定有比0高的

3.接下来就只有黑色和蓝色了 蓝色的权重为 0，0，0，2 黑色的权重为0，0，0，1+0，0，0，1，0=0，0，1，1 所以最后结果为蓝色 第二道题

#father {
    color:red;
}
p{
    color:blue;
}
//html
<div id="father" >
   <p> 猜想一下这行字体是什么颜色 </p>
</div>

答案----蓝色 因为继承权重为0 第三道题：

div p {
    color:red;
}
/*权重最低*/
#father{
    color:black;
}
/*权重0*/
p.c2{
    color:blue;
}
//html
<div id="father"  >
    <p class="c2"> 猜想一下这行字体是什么颜色 </p>
</div>

答案---蓝色

1.标签元素权重为0，0，0，1

2.继承权重为 0

3.p.c2的权重为 0，0，0，1+0，0，1，0

第四到题

.c1 .c2 div {
            color:blue;
}
/*权重最低*/
div #box3 {
    color:green;
}
    
#box1 div {
    color:yellow;
}
//html
 <div id="box1" class="c1">
           <div id="box2" class="c2">
               <div id="box3" class="c3">
                   文字颜色
               </div>
           </div>
   </div>

答案--黄色

1.蓝色权重最低

2.绿色和黄色权重一样，按照就近原则

相关文章