target选择器的用法
在网页设计中，有时需要让特定元素在用户点击锚点链接后"主动亮相"。CSS的:target伪类选择器就像一位贴心的舞台灯光师，能精准捕捉地址栏中的URL片段标识符（即后的内容），自动为对应ID的元素打上聚光灯。这个魔法般的特性无需JavaScript参与，仅凭CSS就能实现页面内元素的智能响应，让静态网页瞬间拥有对话感。
基本语法解析
target选择器的语法简单得令人愉悦——就像给元素戴上一顶会发光的帽子。当浏览器地址栏出现类似section1的哈希值时，只需在样式表中写入`section1:target { background: yellow }`，对应的元素就会在用户跳转时自动变色。这个选择器可与任何CSS属性搭配，从改变背景色到触发复杂动画，如同给元素安装了一个隐形的遥控开关。
动态交互实现
通过配合CSS过渡（transition）或动画（@keyframes），:target能创造流畅的视觉反馈。当用户点击目录导航时，目标章节可以优雅地展开折叠内容，就像缓缓展开的卷轴。通过设置`transition: all 0.5s ease`，元素的宽高、透明度等属性变化会呈现丝滑的过渡效果，这种细腻的交互体验常被用在产品说明书或常见问题页面中。
多层级目标控制
当多个元素共享相同ID时（虽然这不符合HTML规范），:target会选择文档顺序中的首个元素。更聪明的做法是建立"目标家族"——父容器设置`:target`时，其子元素同步响应样式变化。例如新闻列表页中，点击某条新闻摘要后，不仅该条目高亮显示，还通过`article:target .details {display: block}`控制详细内容的显隐。
浏览器兼容策略
虽然现代浏览器普遍支持:target，但需要留意IE8等老旧浏览器的"失明"问题。稳妥的方案是准备渐进增强方案：先确保基础功能可用，再通过特性检测添加增强样式。例如用Modernizr检测支持性后，再加载复杂的动画效果。移动端浏览器中要注意触摸操作可能意外触发哈希值变化的问题。
创意应用场景
这个选择器能变身多种实用工具：在相册页面实现点击缩略图放大展示，制作无需JS的选项卡切换组件，甚至创建简易的单页应用导航系统。教育类网站常用它制作互动习题——点击问题后答案区域自动展开并高亮。更妙的是结合:not选择器，能实现"点击其他区域关闭"的智能效果，就像会察言观色的智能弹窗。
性能优化要点
过度使用:target可能导致样式重绘风暴。经验法则是：避免在:target中修改会引发布局变化的属性（如width/height），优先使用opacity、transform等合成层属性。对于复杂动画，建议添加`will-change: transform`提示浏览器优化渲染。记住给状态变化设置合理的持续时间，通常0.3s-0.5s的过渡既能保证流畅性又不会让用户等待。