天涯论坛

 找回密码
 立即注册
搜索
查看: 82|回复: 3

CSS选取器优先级

[复制链接]

3039

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99119141
发表于 2024-6-30 06:59:33 | 显示全部楼层 |阅读模式

1、CSS有些平常选取

1、标签选取器(元素选取器)

eg:body,li,div,span等

2、类选取器(页面中class能够非常多个)

eg:<div class="content"></div>

3、id选取器(页面中id只能有一个)

eg:<div id="content"></div>

4、通配符选择器:一般用*暗示

5、后代选取

eg:对header元素下的所有的div写样式,即:header div{color:red;}

6、子元素选取

选取做为 header 元素下一级的 div 元素,即:header > div {color:red;}

7、伪类选取

eg:选取器:active,用法:a:active;匹配被点击的链接

2、CSS优先级算法(参照CSS2.1算法,不适于CSS3)

1、算法

倘若声明来自一个style属性而不是一条选取器样式规则,算1,否则便是0 (= a)(HTMl中,一个元素的"style"属性值是样式表规则,这些属性选取器,因此a=1,b=0,c=0,d=0)计算选取器中ID属性的数量 (= b)计算选取器中其它属性和伪类的数量 (= c)计算选取器中元素名和伪元素的数量 (= d)总结:从左到右进行比较,大的优先级越高。

2、示例

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#name {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

3、总结

1、选取器越详细,其优先级越高

2、相同优先级,显现再后面的,覆盖前面的

3、属性后面加!important优先级最高,然则要少用





上一篇:css 选取器类型有哪几种?
下一篇:三句话就搞懂!CSS选取器的优先级计算办法
回复

使用道具 举报

3138

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968624
发表于 2024-10-4 00:41:40 | 显示全部楼层
楼主节操掉了,还不快捡起来!
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-10-4 02:35:54 | 显示全部楼层
感谢您的精彩评论,为我带来了新的思考角度。
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-10-8 06:16:55 | 显示全部楼层
楼主节操掉了,还不快捡起来!
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 22:47 , Processed in 0.099209 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.