CSS选择器的优先级排序

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】

CSS选择器的优先级是按照特定规则计算的，浏览器通过这些规则来决定哪些样式声明将应用于元素。优先级由高到低的排序规则如下：

1. 内联样式（最高优先级）
   直接写在HTML元素的style属性中的样式，例如：

   <div style="color: red;">...</div>
   

2. ID选择器
   通过元素的id属性选择，例如：

   #header { color: blue; }
   

3. 类选择器、属性选择器和伪类
   例如：

   .container { width: 100%; }  /* 类选择器 */
   [type="text"] { padding: 5px; }  /* 属性选择器 */
   a:hover { text-decoration: underline; }  /* 伪类 */
   

4. 元素选择器和伪元素
   例如：

   p { margin-bottom: 1em; }  /* 元素选择器 */
   ::before { content: "→"; }  /* 伪元素 */
   

5. 通配符选择器（最低优先级）
   例如：

   * { box-sizing: border-box; }
   

计算优先级的规则

• 内联样式：计为 1,0,0,0
• ID选择器：每个ID计为 0,1,0,0
• 类/属性/伪类选择器：每个计为 0,0,1,0
• 元素/伪元素选择器：每个计为 0,0,0,1
• 通配符选择器：不计分（0,0,0,0）

示例

比较以下选择器的优先级：

/* 优先级: 0,1,0,0（ID选择器） */
#content { color: red; }

/* 优先级: 0,0,1,1（类选择器 + 元素选择器） */
.main p { color: blue; }

/* 优先级: 0,0,0,1（元素选择器） */
p { color: green; }

如果一个元素同时匹配上述三个规则，#content 的样式将优先应用，因为它的ID选择器优先级最高。

特殊情况

• !important声明：可以覆盖任何优先级规则，但应谨慎使用，因为它会破坏正常的优先级体系。

  p { color: red !important; }  /* 强制生效，除非有更高的!important */
  

• 继承的样式：永远比直接应用的样式优先级低，即使是低优先级的选择器直接应用也会覆盖高优先级的继承样式。

理解这些规则后，你可以更准确地控制CSS样式的应用顺序，避免使用!important带来的维护问题。