天涯论坛

 找回密码
 立即注册
搜索
查看: 73|回复: 1

三句话就搞懂!CSS选取器的优先级计算办法

[复制链接]

2835

主题

316

回帖

9191万

积分

论坛元老

Rank: 8Rank: 8

积分
91919712
发表于 2024-6-30 07:00:46 | 显示全部楼层 |阅读模式

当CSS属性的效果互相抵触时,就必须计算CSS选取器的优先级。

首要咱们给选CSS择器归类

行内样式 <div style="xxx"></div> ==> 标记a类ID 选取器 ==> 标记b类类,属性选取器和伪类选取器 ==> 标记c类标签选取器、伪元素 ==> 标记d类

**计数办法:**a/b/c/d类中,显现一类,就给a/b/c/d计一个 次数。a-d从高级到低级,a类的次数高的,其样式权重高,其余bcd类需再比较;若a类的次数相同,则比较b类,b类的次数高的,其样式高权重高,其余cd类需再比较。以此类推到d类。(此段一共3个句号,没骗你吧)

abcd类样式 的计数,举例如下:

{}为style的括号,*星号选取暗示所有标签
*{} //a=0 b=0 c=0 d=0 最弱权重 a:hover{} //a=0 b=0 c=1 d=1 ul ol{} //a=0 b=0 c=0 d= 2 ul ol+li{} //a=0 b=0 c=0 d=3 h1+input[type=hidden]{} //a=0 b=0 c=1 d=3 [type=hiden]属性选取器 ul ol li.acticce{} //a=0 b=0 c=1 d=3 #ct .box p //a=0 b=1 c=1 d=1 div#header :after{} //a=0 b=1 c=0 d=2 :after伪元素 style="" //a=1 b=0 c=0 d=0

另一

1 还有 样式覆盖。

倘若以上中有 权重计数相同的样式 相互抵触,谁写在下面(谁最后被写下),谁管用,之前先写的样式都被覆盖 不管用了。

2 以上归类是依据CSS选取器本身的优先级,大体上,从高到低 如下。其中 !important 会视一切,包含上面的计算办法

在属性后面运用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}做为style属性写在元素标签上的内联样式id选取器类选取器=* 伪类选取器=* 属性选取器标签选取器=*为元素选取器通配符选取器浏览器自定义

//直观理解这个次序能够猜出来优先级了




上一篇:CSS选取器优先级
下一篇:CSS 选取器优先级怎么样确定
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109193
发表于 2024-10-28 17:28:13 | 显示全部楼层
期待与你深入交流,共探知识的无穷魅力。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 05:04 , Processed in 0.094986 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.