说一说样式优先级的规则是什么？

[问答题]

说一说样式优先级的规则是什么？

查看答案及解析

已注销

!important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器

发表于 2022-04-21 18:14:04 回复(2)

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)

牛客371768910号

id >类伪类属性 >后代伪元素>子选择器>通配符

发表于 2022-04-22 13:56:01 回复(0)

牛客782467112号

1.!important、 2.行内样式>（嵌入样式、外链样式）、 3.id选择器>（类选择器、伪类选择器、属性选择器）>（后代选择器、伪元素选择器）>（子选择器、相邻选择器）>通配符选择器、 4.继承样式、 5.浏览器默认样式

发表于 2022-05-19 15:29:00 回复(1)

牛客985915037号

！improtant > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

发表于 2022-04-27 11:21:21 回复(0)

牛客186390190号

!important > 行内样式> id选择器> 类选择器>标签选择器> 通配符选择器 > 浏览器继承

发表于 2022-08-13 17:43:47 回复(0)

牛客287693583号

第一类`!important`。 -第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。 -第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器）> （后代选择器 | 伪元素选择器）> （子选择器 | 相邻选择器） > 通配符选择器。 -第四类继承样式，是所有样式中优先级比较低的。 -第五类浏览器默认样式优先级最低。

发表于 2022-07-11 16:18:46 回复(0)

夏风八分甜

！important>行内>id选择器>class、伪类、属性>伪元素、标签>通配符

发表于 2022-04-29 12:10:40 回复(0)

Knight.c

!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符

发表于 2022-05-22 11:23:27 回复(0)

牛客150990719号

!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

发表于 2022-05-03 10:30:43 回复(0)

爱吃草莓蛋挞

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)

edjtu19-软工3班-何江涛

浏览器会为元素匹配样式。但元素经常会有样式冲突，比如元素同时有width:100px，width:1000px，这个时候浏览器选哪个呢?

w3c标准规定，属性的优先级有一个权重公式：行内样式权重是n³，id选择器权重是n²,class选择器权重n¹，标签选择器权重n⁰，通配符权重0。权重越高优先级越高。由此诞生了下面几个结果：

1.行内>id>class>标签。注意点：js修改的是行内样式。
2.行内>内联=外联。评论区说“行内>内联>外联”是错误的，经实践。

权重公式看起来很复杂，w3c因此提供了一种强制覆盖样式的手段：“!important”。这个规则与权重计算完全不同，“!important”不会改变权重。但使用它后，优先级比所有其他样式都高。如果两个样式都有“!important”，则按权重确定优先级。

“!important”灵活性太低了，它会带来难排除的bug。因此尽量少使用它。
1.永远不要在全站范围的 CSS 代码中使用“!important”。因为使用后，局部样式想覆盖它，只能也使用“!important”。
2.永远不要在你的插件中使用“!important”。这样的bug排除起来让人抓狂。
自己ps的图片