怎么增加css类名的权重 css提高权重

转载

mob64ca1413c518 2024-03-20 19:32:26

文章标签 怎么增加css类名的权重 css 前端权重选择器 文章分类 深度学习人工智能

如何计算权重？

计算规则：权重由（A、B、C、D）四个值决定，这四个值的含义如下：

如果出现内联样式
B 的值等于ID选择器出现的次数
C 的值等于类选择器、属性选择器、伪类出现的次数
D 的值等于标签选择器、伪元素出现的次数

根据上面的规则求出A、B、C、D的值，例如：

#nav-global > ul > li > a.nav-link:hover

因为没有内联样式，A=0
ID选择器出现过一次，B=1
类选择器出现1次，属性选择器出现0次，伪类选择出现1次，C=2
标签选择器出现3次，D=3

求出的值可以简化为（0，1，2，3）

如何比较权重？

根据求出来的权重值（A，B，C，D）从左向右依次比较，较大者胜出；如果四位都相等，则遵循后来者居上原则。

例如：

#nav-list .item {
     color: #f00;
 }
 .nav-list .item {
     color: #0f0
 }#nav-list .item 的优先级为（0，1，1，0）
 .nav-list .item 的优先级为（0，0，2，0）

A值都是0，B值前者1大于后者0，所以 #nav-list .item 应该大于 .nav-list .item ，字体颜色会是 #f00。

如何增加权重？

日常开发中，我们经常遇到要覆盖已有样式的问题，但是增加了样式之后却因为权重不够高而无法成功覆盖，通常我们会尝试一下几个方案：

1.根据页面DOM结构，写出一个权重相同的选择器。缺点：不易于维护，DOM结构发生更改，覆盖的样式就需要更改。

示例：

<div class="box1">
    <div class="box2">
        <div class="box3">文字</div>
    </div>
</div>
 
// 原有样式
.box1 .box2 .box3 {color: blue}
 
// 覆盖样式（ps:这么写可以覆盖，但是DOM结构发生更改，CSS结构可能也需要更改）
.box1 .box2 .box3 {color: red}

2. 使用更深的层级。缺点：为了增加权重而去增加DOM结构，很显然不是最优解，更何况很多组件你没法更改样式。

3.使用ID选择器覆盖。缺点：这样会使样式权重过高，之后想要覆盖只能使用!important了。

4.使用!important。缺点：这是最差的方法，会让样式权重高到下一次你不知道怎么解决。