在CSS样式规则中，当多个选择器同时匹配到同一个HTML元素时，浏览器会根据选择器的优先级来决定最终应用哪一组样式，其中类选择器和ID选择器是最常用的两种选择器类型，二者的优先级存在明确差异。
选择器优先级的基本规则
CSS优先级的计算基于选择器的权重值，不同选择器的权重等级不同，权重高的选择器样式会覆盖权重低的同属性样式。常见的选择器权重从低到高依次为：
- 通配符选择器（*）：权重为0
- 元素选择器（如div、p）：权重为1
- 类选择器（如.class）：权重为10
- ID选择器（如#id）：权重为100
- 行内样式（style属性）：权重为1000
- !important声明：权重最高，会覆盖所有其他样式
从这个权重规则可以看出，ID选择器的权重远高于类选择器，因此当同一个元素同时被ID选择器和类选择器设置相同样式属性时，ID选择器的样式会生效。
代码实例验证优先级差异
下面通过一个简单的HTML和CSS示例来直观展示二者的优先级表现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器优先级测试</title>
<style>
/* 类选择器样式 */
.text-style {
color: blue;
font-size: 16px;
}
/* ID选择器样式 */
#unique-text {
color: red;
}
</style>
</head>
<body>
<div class="text-style" id="unique-text">
这段文本的颜色会是什么？
</div>
</body>
</html>
在上面的代码中，div元素同时拥有类text-style和IDunique-text，两个选择器都设置了color属性，类选择器设置颜色为蓝色，ID选择器设置颜色为红色。由于ID选择器权重（100）高于类选择器权重（10），最终文本会显示为红色，而font-size:16px属性只有类选择器设置，所以会正常生效。
优先级计算的注意事项
在实际开发中，优先级计算还有一些需要注意的细节：
权重叠加规则
如果一个选择器由多个基础选择器组合而成，权重会进行叠加，比如div#unique-text的权重是元素选择器权重1加上ID选择器权重100，总权重为101，高于单独的ID选择器权重100。
相同权重下的生效规则
如果两个选择器的权重完全相同，那么后面定义的样式会覆盖前面定义的样式，这个规则叫做层叠性。
!important的特殊影响
如果在类选择器的样式属性后添加!important声明，那么该属性的优先级会超过ID选择器的同属性样式，例如：
.text-style {
color: blue !important;
}
#unique-text {
color: red;
}
此时即使ID选择器权重更高，color:blue因为带有!important声明，会最终生效，文本显示为蓝色。
实际开发中的使用建议
为了避免优先级混乱导致的样式问题，开发时可以遵循以下原则：
- 尽量减少ID选择器的使用，因为ID选择器权重过高，后续如果要覆盖样式会比较困难
- 优先使用类选择器来定义样式，便于复用和维护
- 避免滥用
!important声明，只有在必须覆盖第三方库样式等特殊情况下才使用 - 如果需要覆盖高权重样式，可以通过增加选择器权重的方式实现，而不是直接使用
!important
掌握CSS类选择器与ID选择器的优先级规则，能够帮助开发者更高效地调试样式问题，写出更易维护的CSS代码。