天涯论坛

 找回密码
 立即注册
搜索
查看: 75|回复: 4

CSS 选取器优先级怎么样确定

[复制链接]

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-6-30 07:02:01 | 显示全部楼层 |阅读模式

CSS中有以下优先级:

1、标记选取器(如:body,div,p,ul,li)

2、id选取器(如:id="name",id="name_txt")

3、类选取器(如:id="name",id="name_txt")

4、后代选取器(如:#head .nav ul li 从父集到子孙集的选取器)

5、子元素选择器(如:div>p ,带大于号>)

6、伪类选取器(如:便是链接样式,a元素的伪类,4种区别的状态:link、visited、active、hover。)

看完了基本的css选取器类型后,咱们接着来看一下css优先级的概念。

当两个规则都功效到了同一个html元素上时,倘若定义的属性有冲突,那样应该用谁的值的,用到谁的值谁的优先级就高。

咱们来看一下css选取器优先级的算法:

每一个规则对应一个初始"四位数":0、0、0、0

若是 行内选取符,则加1、0、0、0

若是 ID选取符,则加0、1、0、0

若是 类选取符/伪类选取符,则分别加0、0、1、0

若是 元素选取符,则分别加0、0、0、1

算法:将每条规则中,选取符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。

看完了以上内容,那咱们就来瞧瞧css选取器优先级的详细排序。

css选取器优先级最高到最低次序为:

1.id选取器(#myid)

2.类选取器(.myclassname)

3.标签选取器(div,h1,p)

4.子选取器(ul < li)

5.后代选取器(li a)

6.伪类选取(a:hover,li:nth-child)

因此想让咱们必须的优先级更高,咱们能够在等同优先级,加上一个优先级更高的选取器,使总优先级高于其他优先级,这般掌控优先级的高低。





上一篇:三句话就搞懂!CSS选取器的优先级计算办法
下一篇:CSS--选取器及其优先级
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-27 09:20:26 | 显示全部楼层
软文发布平台 http://www.fok120.com/
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-7 04:19:23 | 显示全部楼层
论坛的成果是显著的,但我们不能因为成绩而沾沾自喜。
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
 楼主| 发表于 2024-10-16 12:11:43 | 显示全部楼层
真情实感,其含义为认真了、走心了的意思,是如今的饭圈常用语。
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-30 22:55:06 | 显示全部楼层
大势所趋,用于讽刺一些制作目的就是为了跟风玩梗,博取眼球的作品。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 09:40 , Processed in 0.152679 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.