CSS ID选择器与片段标识符的关联及高特异性原因问询

一、CSS ID选择器与片段标识符的关联 #

两者确实依托同一个HTML属性，但功能完全独立：

• CSS中的#xxx选择器，作用是选中页面内id="xxx"的元素，为其应用样式；
• URL中的片段标识符#xxx，作用是让浏览器定位到页面内id="xxx"的元素，实现页面内跳转。
• 两者只是共享了id属性这个载体，属于浏览器不同功能模块的实现，没有直接的技术依赖关系。

二、ID选择器特异性更高的原因 #

ID选择器比类选择器特异性更高，和片段标识符没有任何关系，核心原因是HTML与CSS的设计逻辑匹配：

• HTML规范明确要求：一个页面内的id值必须唯一，每个id仅对应一个元素；
• 而class属性的设计初衷就是为了复用样式，可同时应用在多个元素上。

CSS的特异性规则（!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器），是为了适配这种定位逻辑——当需要给某个唯一元素设置特殊样式时，ID选择器可以直接覆盖通用类样式，无需复杂的选择器嵌套。

结合你给出的代码示例：

.box-a{
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #ff0000;
}

#box-b{
  background-color: #ffe666;
}

<div class="box-a" id="box-b"></div>
<div class="box-a"></div>

第一个<div>的背景色显示为黄色（#ffe666），就是因为ID选择器的特异性高于类选择器，覆盖了类中的背景色设置——这个优先级逻辑和片段标识符的页面跳转功能毫无关联。

内容的提问来源于stack exchange，提问作者Harpreet Singh Kapula