如何仅通过CSS实现各页面选中菜单项的高亮效果（无需依赖body类）

实现方案 #

完全去掉对每个页面body类的依赖、纯CSS实现导航高亮的核心方法，是使用CSS原生的@document条件规则，直接匹配当前页面的URL路径，在匹配到的路径下给对应菜单项触发高亮样式，全程不需要修改每个页面的标签类名。

具体操作步骤 #

• 把原有CSS中所有依赖body类的高亮选择器全部移除，仅保留基础的hover交互样式
• 按每个导航项对应的路径，编写独立的@document规则块，匹配对应路径时给目标菜单项加高亮样式

改造后的完整CSS代码 #

/* 保留原有的hover交互样式，无需改动 */
.topplinker span:hover {
  background-color: #fffcd9;
  border-radius: 0 10px 0 0;
}

/* 首页高亮：匹配根路径、带index后缀的访问路径，兼容常见的静态页访问形式 */
@document url("/"), url-prefix("/index") {
  .topplinker .shjem {
    background-color: #fffcd9;
    border-radius: 0 10px 0 0;
  }
}

/* 联系页高亮 */
@document url("/kontakt"), url-prefix("/kontakt") {
  .topplinker .skontakt {
    background-color: #fffcd9;
    border-radius: 0 10px 0 0;
  }
}

/* 建筑运维页高亮 */
@document url("/byggdrifter"), url-prefix("/byggdrifter") {
  .topplinker .sbyggdrifter {
    background-color: #fffcd9;
    border-radius: 0 10px 0 0;
  }
}

/* 关于页高亮 */
@document url("/om"), url-prefix("/om") {
  .topplinker .som {
    background-color: #fffcd9;
    border-radius: 0 10px 0 0;
  }
}

方案优势 #

• 不需要在任何单独页面的body标签上配置专属类，所有公共导航HTML结构完全一致，无额外维护成本
• 所有路径匹配规则全部集中在公共CSS文件中，新增页面时只需要在CSS里补充对应路径的规则即可
• 完全依靠CSS原生能力实现，无任何JavaScript逻辑，符合纯CSS的要求

兼容性说明：当前Chrome 119+、Edge 119+、Firefox 61+的正式版本，均支持作者样式表下的@document路径匹配能力。如果需要兼容更早版本的浏览器，纯CSS场景下没有其他可以完全脱离页面专属类的方案——因为普通CSS规则本身没有读取当前页面URL的能力，必须依赖浏览器提供的URL匹配类原生规则才能实现路径感知。

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