CSS中ID选择器与class选择器的声明哪一个优先级更高？

ID选择器的优先级高于类选择器，你示例中元素最终展示红色背景是符合CSS官方优先级规则的。

核心优先级权重规则 #

CSS选择器的生效优先级由权重值决定，权重越高的选择器定义的同属性声明优先级越高，常用选择器权重从高到低排序如下：

• 特殊声明：带!important后缀的属性声明优先级最高，会覆盖所有同属性的普通声明，非特殊情况不推荐滥用，会打乱整体样式优先级逻辑
• 行内样式：直接写在HTML标签style属性中的样式，权重值为1000
• ID选择器：以#开头的选择器，权重值为100
• 类选择器、属性选择器、伪类选择器：以.开头的类选择器、[attr=xxx]这类属性选择器、:hover这类伪类选择器，权重值均为10
• 标签选择器、伪元素选择器：div、p这类标签选择器、::before这类伪元素选择器，权重值为1

示例匹配逻辑 #

你给出的代码中：

1. #mybox是ID选择器，权重为100，定义背景色为红色
2. .box是类选择器，权重为10，定义背景色为黄色
3. 100>10，所以ID选择器的背景色声明优先级更高，最终生效

注意：只有当两个选择器的权重完全相同时，才会按照CSS代码的书写顺序，后面写的声明覆盖前面的声明，你的示例二者权重差一个量级，和书写顺序无关。

拓展说明 #

如果需要让类选择器的同属性声明覆盖ID选择器，除了删除ID选择器的对应声明外，极端场景下可以给类选择器的属性加!important后缀，示例如下：

.box{background-color:yellow !important;}

更推荐的做法是尽量避免对同一个元素同时用ID和类定义同属性的样式，保持样式优先级逻辑清晰，减少后续维护成本。

内容的提问来源于stack exchange，提问作者chinni