使用 :target 可实现纯 CSS 单页导航高亮，通过 URL 片段激活目标元素样式。1. 导航链接指向带 ID 的内容区；2. 利用 section:target 高亮当前内容；3. 因 CSS 无法反向选中导航，需调整结构，如将 .nav-link 置于目标区域内；4. 通过 .nav-link:target 或 div:target .nav-link 规则高亮对应导航项。适合静态页面，依赖合理 HTML 结构。
使用 :target 实现单页导航高亮，是一种纯 CSS 的方法，适合简单的页面锚点跳转场景。当 URL 中的片段标识符（即 # 后面的部分）指向页面中的某个元素时，该元素就成为“目标元素”，可以通过 :target 选择器为其添加样式，比如高亮对应的导航项。
1. 基本结构：HTML 锚点与目标元素
确保每个导航链接指向页面中的一个唯一 ID，这些元素就是可能被激活的目标。
首页内容
关于内容
联系内容
2. 使用 :target 高亮目标区域
你可以为当前显示的内容区域添加背景或边框，表示它是当前选中项。
section:target { background-color: #f0f8ff; border-left: 4px solid #007acc; padding: 20px;}
3. 实现导航项高亮
由于 CSS 无法反向选择父级或兄弟之前的元素（除非结构允许），你需要调整 HTML 结构来让导航项能响应目标状态。一种常见方式是把导航和内容放在一起，利用相邻或兄弟选择器。
立即学习“前端免费学习笔记（深入）”；
示例：将导航放在对应内容内部，并默认隐藏，仅在目标激活时显示高亮状态。
更实用的方式是结合伪类与结构设计：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
/* 默认样式 */nav a { color: #333; text-decoration: none;}/ 当点击 #about，且有一个 a[href="#about"] 存在时，怎么高亮它？ // 我们可以反过来：通过目标元素影响其“关联”的导航 —— 但需借助额外结构 /
如果结构不能改变，:target 无法直接选中导航链接。这时可以采用以下技巧：
4. 替代方案：用 label 模拟导航（进阶技巧）
使用隐藏 radio 或 checkbox + label 配合 :target 复杂但可控。不过对于简单需求，推荐 JavaScript 辅助，或者接受只能高亮内容区的事实。
若坚持纯 CSS 且想高亮菜单文字，可考虑如下结构：
首页这里是首页内容... 关于关于内容...
.nav-link { display: block; margin: 10px; color: #000; text-decoration: none;}/ 当前目标页的链接高亮 /.nav-link:target,div:target .nav-link {color: red;font-weight: bold;}
这样，当用户点击导航进入某区块时，该区块成为目标，其内部的 .nav-link 就会被高亮。
基本上就这些。虽然 :target 功能有限，但在轻量级项目中足够实用，尤其适合无 JS 的静态页面。关键是合理安排 HTML 结构，让 CSS 能够“触及”到需要高亮的元素。
以上就是如何用css:target制作单页导航高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030040.html
微信扫一扫 
支付宝扫一扫 
