css权重,权值与优先级解析

本文详细介绍了CSS中权重的概念,包括权值计算和优先级规则。权重决定了选择器的重要程度,权值分为四个等级:内联样式、ID选择器、class|伪类|属性选择器和标签|伪元素选择器。当样式冲突时,优先级由高等级到低等级依次比较,相同优先级则后定义的样式覆盖前定义的。特别地,`!important`声明的权值被视为无限大,具有最高优先级。理解这些规则对于优化CSS和解决样式覆盖问题至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 权重概念:

权重,是一个相对的概念,代表了选择器之间的相对重要程度。
  
2. 权值概念:
权值又叫权重系数,是根据选择器之间权重大小而得到的量化的值。
  
3. css优先级:
css样式的优先级是由其权值决定的,权值越高其css优先级越高,但这里有个例特殊点,!important的权值可看做无限大

4.权值计算
第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;

第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;

第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

此外,通用选择器(),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;
    
权值 = 第一等级选择器
个数加第二等级选择器个数加第三等级选择器个数加第四等级选择器*个数
注意:低等级的选择器权重再高也没有高等级的选择器优先级高
在这里插入图片描述
总结一下,css样式优先级比较规则就是三点

1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值