:target伪类在URL片段与元素id匹配时生效，可用于高亮内容、实现选项卡和模态框。例如，当URL为#section1时，id=”section1″的元素应用:target样式，如背景变黄或显示块。常用于无需JavaScript的交互效果，支持现代浏览器及IE9以上，需注意仅作用于有id的元素，页面加载无锚点时不触发，建议结合transition和可访问性优化使用。
当页面URL中的片段标识符（即#后面的部分）与某个元素的id匹配时，:target伪类就会生效。这个特性可以用来高亮显示或动态展示特定内容，无需JavaScript就能实现简单的交互效果。
:target 选择器的基本用法
使用 :target 可以为当前锚点指向的元素添加特殊样式。浏览器会根据URL中的#值自动匹配对应id的元素。
例如，如果URL是 https://example.com/page.html#section1，那么 id=”section1″ 的元素就会被 :target 选中。
基本语法如下：
立即学习“前端免费学习笔记（深入）”；
// 当前锚点指向的元素背景变黄:target { background-color: yellow;}
实际应用场景示例
:target 常用于内容高亮、简易选项卡、模态框显示等场景。
1. 内容高亮
帮助用户快速定位到他们点击的章节或标题位置。
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 :target { background-color: #ffeb3b; padding: 2px; border-left: 4px solid #ff9800;}
2. 简易选项卡切换
通过隐藏非目标面板，只显示当前选中的内容块。
.tab-content { display: none;}:target { display: block;}
配合HTML结构，即可实现无脚本的选项卡功能。
3. 轻量级模态框
利用 :target 显示弹窗，点击其他地方或关闭按钮可跳转至无效锚点来关闭。
.modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.3);}:target { display: block;}
注意事项与兼容性
:target 是CSS2引入的伪类，现代浏览器都支持，包括IE9及以上版本。
但需注意以下几点：
只能作用于拥有id属性的元素 页面加载时若无锚点，则不会触发 :target 样式 动画过渡需结合 transition 使用，且注意初始状态设置 对可访问性友好，但仍建议为视觉反馈提供额外提示（如滚动偏移）基本上就这些。合理使用 :target 能提升用户体验，同时减少对JavaScript的依赖。
以上就是如何在CSS中使用:target伪类_锚点元素样式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/957546.html
微信扫一扫 
支付宝扫一扫 
