首页
题库
面试
求职
学习
竞赛
More+
所有博客
搜索面经/职位/试题/公司
搜索
我要招人
去企业版
登录 / 注册
首页
>
试题广场
>
说一说样式优先级的规则是什么?
[问答题]
说一说样式优先级的规则是什么?
添加笔记
求解答(0)
邀请回答
收藏(226)
分享
纠错
228个回答
添加回答
156
已注销
!important > 内联样式(style) > ID选择器(id) > 类选择器(class) > 标签选择器
发表于 2022-04-21 18:14:04
回复(3)
64
Ailjx
!important > 内联样式 > ID 选择器(#id{}) > 类选择器(.class{}) = 属性选择器(a[href="segmentfault.com"]{}) = 伪类选择器( :hover{}) > 标签选择器(span{}) = 伪元素选择器( ::before{})= 后代选择器(.father .child{})> 子选择器(.father > .child{}) = 相邻选择器( .bro1 + .bro2{}) > 通配符选择器(*{})
发表于 2022-08-31 17:35:08
回复(2)
29
牛客371768910号
id >类 伪类 属性 >后代 伪元素>子选择器>通配符
发表于 2022-04-22 13:56:01
回复(0)
18
牛客782467112号
1.!important、 2.行内样式>(嵌入样式、外链样式)、 3.id选择器>(类选择器、伪类选择器、属性选择器)>(后代选择器、伪元素选择器)>(子选择器、相邻选择器)>通配符选择器、 4.继承样式、 5.浏览器默认样式
发表于 2022-05-19 15:29:00
回复(1)
13
牛客985915037号
!improtant > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符
发表于 2022-04-27 11:21:21
回复(0)
12
牛客186390190号
!important > 行内样式> id选择器> 类选择器>标签选择器> 通配符选择器 > 浏览器继承
发表于 2022-08-13 17:43:47
回复(0)
9
牛客287693583号
第一类`!important`。 -第二类引入方式,行内样式的优先级要高于嵌入和外链,嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序,在后面插入的会覆盖前面的。 -第三类选择器,选择器优先级:id选择器>(类选择器 | 伪类选择器 | 属性选择器 )> (后代选择器 | 伪元素选择器 )> (子选择器 | 相邻选择器) > 通配符选择器 。 -第四类继承样式,是所有样式中优先级比较低的。 -第五类浏览器默认样式优先级最低。
发表于 2022-07-11 16:18:46
回复(0)
6
夏风八分甜
!important>行内>id选择器>class、伪类、属性>伪元素、标签>通配符
发表于 2022-04-29 12:10:40
回复(0)
4
Knight.c
!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符
发表于 2022-05-22 11:23:27
回复(0)
3
牛客150990719号
!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符
发表于 2022-05-03 10:30:43
回复(0)
2
爱吃草莓蛋挞
CSS样式的优先级应该分成四大类 -【第一类】`!important`,无论引入方式是什么,选择器是什么,它的优先级都是最高的。 -【第二类】引入方式,行内样式的优先级要高于嵌入和外链,嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序,在后面插入的会覆盖前面的。 -【第三类】选择器,选择器优先级:id选择器>(类选择器 | 伪类选择器 | 属性选择器 )> (后代选择器 | 伪元素选择器 )> (子选择器 | 相邻选择器) > 通配符选择器 。 -【第四类】继承样式,是所有样式中优先级比较低的。 -【第五类】浏览器默认样式优先级最低。 【加分回答】 使用!important要谨慎 - 一定要优先考虑使用样式规则的优先级来解决问题而不是 `!important` - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 `!important` - 永远不要在你的插件中使用 `!important` - 永远不要在全站范围的 CSS 代码中使用 `!important` - 优先级的比较指的是相同的样式属性,不同样式属性优先级比较失效, 【比如】:在设置`max-width`时注意,已经给元素的`max-width`设置了`!important`但是还不生效,很有可能就是被width覆盖了 举例:`div`最终的宽度还是`200px` div { max-width: 400px !important; height: 200px;background-color: tomato; width: 200px; }
发表于 2023-02-22 18:00:22
回复(0)
2
edjtu19-软工3班-何江涛
浏览器会为元素匹配样式。但元素经常会有样式冲突,比如元素同时有width:100px,width:1000px,这个时候浏览器选哪个呢?
w3c标准规定,属性的优先级有一个权重公式:行内样式权重是n
3
,id选择器权重是n
2
,class选择器权重n
1
,标签选择器权重n
0
,通配符权重0。权重越高优先级越高。由此诞生了下面几个结果:
1.行内>id>class>标签。注意点:js修改的是行内样式。
2.行内>内联=外联。评论区说“行内>内联>外联”是错误的,经实践。
权重公式看起来很复杂,w3c因此提供了一种强制覆盖样式的手段:“!important”。这个规则与权重计算完全不同,“!important”不会改变权重。但使用它后,优先级比所有其他样式都高。如果两个样式都有“!important”,则按权重确定优先级。
“!important”灵活性太低了,它会带来难排除的bug。因此尽量少使用它。
1.永远不要在全站范围的 CSS 代码中使用“!important”。因为使用后,局部样式想覆盖它,只能也使用“!important”。
2.永远不要在你的插件中使用“!important”。这样的bug排除起来让人抓狂。
编辑于 2022-11-10 14:50:53
回复(0)
1
安心找工作
!important>行内>id>class>target>全局
编辑于 2024-03-11 16:37:36
回复(0)
1
图图不秃_
!important>行内样式 (style)>ID选择器>类选择器(伪类选择器、属性选择器)>标签选择器(伪元素选择权、后代选择器)>子代选择器>相邻选择器>通配符选择器
编辑于 2024-03-10 10:35:59
回复(0)
1
牛客114897187号
!important》内联样式〉ID选择器》类选择器=伪类=属性〉标签=伪元素=后代》子=相邻〉通配
发表于 2023-08-10 11:36:06
回复(0)
1
牛客487571952号
!important>行内样式>ID选择器 > 类选择器 > 标签选择器 > 通配符* >继承
发表于 2022-11-10 18:59:00
回复(0)
1
在敲键盘的糖糖很靠谱
!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > *。就近原则,后加样式优于先加样式,!important优先级最高,行内样式>内联样式 > 外链样式
发表于 2022-11-03 23:03:49
回复(0)
1
牛客652817453号
!important>内联>id>class(伪类,属性)>后代 伪元素>子选择器 相邻选择器>通配符
编辑于 2022-10-25 14:53:27
回复(0)
1
柳雨1
!important>内联>选择器>通配符>继承
发表于 2022-10-18 17:16:29
回复(0)
1
牛客979462847号
!important>内联样式>id选择器>类(伪类|属性)选择器>标签选择器>后代|伪元素选择器>子|相邻选择器>通配符>继承样式
发表于 2022-09-07 08:59:16
回复(0)
这道题你会答吗?花几分钟告诉大家答案吧!
提交观点
问题信息
HTML与CSS
上传者:
real19931
难度:
228条回答
226收藏
1380浏览
热门推荐
相关试题
说一说盒模型?
HTML与CSS
评论
(206)
说一下浮动?
HTML与CSS
评论
(176)
说一说HTML语义化?
HTML与CSS
评论
(294)
属于组合逻辑电路是()。
数字电路
评论
(1)
如果通过这次面试我们单位录用了你,...
岗位认知
自我认知
评论
(1)
扫描二维码,关注牛客网
意见反馈
下载牛客APP,随时随地刷题