:target伪类仅在URL fragment与元素id精确匹配且发生跳转时触发样式，不检测ID存在与否；它依赖hash变化的运行时行为，非静态属性判断，故无法实现“有id就变色”。
:target 伪类只响应 URL 中的 fragment（即 #id）与元素 id 匹配的**当前激活状态**，它不判断“元素是否具有某个 ID”，而是判断“该元素是否正被当前 URL 的 hash 指向”。想靠 :target 实现“只要有 id 就变色”，行不通。
为什么 :target 不适合“检测是否存在 ID”
:target 是运行时行为选择器，不是静态属性检测器。它的触发依赖两个条件同时满足：
① 页面 URL 包含 fragment，例如 #section2；
② 文档中存在 id="section2" 的元素，且该元素是当前 fragment 唯一匹配目标。
常见误解是写 div:target { color: red; } 以为所有带 id 的 div 都会红——实际只有点击了对应锚点链接、或手动改了地址栏 hash 后，那个**刚被跳转到的元素**才会生效。页面加载完没 hash，:target 规则完全不触发。
:target 的正确使用场景：锚点高亮与单页导航反馈
它真正适用的是用户已执行跳转后的视觉反馈，比如：
立即学习“前端免费学习笔记（深入）”；
- 点击
<a href="#faq1">常见问题1</a>后，让<h2 id="faq1">…</h2>背景短暂高亮 - 在文档内导航时，自动滚动到目标后加个边框提示
- 配合
scroll-margin-top微调定位，避免被固定头部遮挡
示例 CSS：
h2:target {
background-color: #ffeb3b;
padding: 2px 8px;
animation: highlight 1.5s ease-out;
}
@keyframes highlight {
0% { background-color: #ffeb3b; }
100% { background-color: transparent; }
}
真想“根据是否有 ID 改颜色”，得换思路
纯 CSS 无法直接检测某元素是否声明了 id 属性（这属于 DOM 结构判断，非渲染状态）。可行替代方案包括：
-
用属性选择器显式匹配：写
[id="my-id"] { color: red; }—— 但必须提前知道 ID 名，不能泛化“任意 ID” -
靠 class 替代语义：给需要特殊样式的元素加统一 class，如
class="has-id-highlight"，再用.has-id-highlight { color: red; } -
JavaScript 动态判断：用
el.hasAttribute('id')检测，再设 class 或 style —— 这才是可靠方式
注意：[id] 选择器虽能选中所有带 id 属性的元素，但它**不区分空值或无效值**（比如 id="" 或 id=" " 也会命中），且 IE8– 不支持。
容易忽略的关键点
:target 的样式在 hash 变更瞬间应用，但不会持续保留；若用户手动删掉地址栏 hash，样式立即消失。它不维护“状态”，只响应一次 fragment change 事件。如果你看到颜色没变，先检查：
① 当前 URL 是否真有 #xxx；
② 对应元素是否确实存在且 id 值完全一致（大小写敏感、无空格）；
③ 元素是否被 display: none 或 visibility: hidden 阻断了样式继承（:target 本身不受影响，但子元素可能不可见）。
