如何优化:target伪类样式，区分空/非空<a>元素的显示效果？

核心问题是原有CSS未区分**空与非空**的:target状态，导致非空错误套用了空锚点的横线样式。解决思路是用:empty伪类精准匹配空，让不同类型的目标元素各司其职：

最终CSS代码 #

/* 通用规则：块级、行内元素（含非空<a>）的target状态显示红色虚线轮廓 */
:target {
  outline: 2px dashed red;
}

/* 仅针对空<a>的target状态：覆盖轮廓，显示上方红色虚线横线 */
a:target:empty {
  outline: none;
  border-top: 2px dashed red;
}

代码说明 #

• :empty伪类会严格匹配**无任何内容（包括文本、空格、子元素）**的元素，完美适配你提到的多锚点复用空锚点的场景。
• 非空因不满足:empty条件，会自动继承通用:target的轮廓样式，和

  、保持视觉一致性。

• 空通过outline: none覆盖通用规则，再单独设置border-top实现上方虚线横线的需求。

验证示例 #

<!-- 非空a元素，target时显示红色虚线轮廓 -->
<a id="non-empty" href="#non-empty">点击测试非空a的target样式</a>

<!-- 空锚点，target时显示上方红色虚线横线 -->
<a id="empty-anchor" href="#empty-anchor"></a>

<!-- 块级p元素，target时显示红色虚线轮廓 -->
<p id="test-p">
  这是块级p元素，<a href="#test-p">点击定位到我</a>
</p>

<!-- 行内span元素，target时显示红色虚线轮廓 -->
<p>这是行内<span id="test-span">span元素</span>，<a href="#test-span">点击定位到我</a></p>

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