如何在CSS中使用:target伪类_锚点元素样式应用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用:target伪类_锚点元素样式应用

2025-11-19

浏览次数：次

返回列表

:target伪类在URL片段与元素id匹配时生效，可用于高亮内容、实现选项卡和模态框。例如，当URL为#section1时，id="section1"的元素应用:target样式，如背景变黄或显示块。常用于无需J*aScript的交互效果，支持现代浏览器及IE9以上，需注意仅作用于有id的元素，页面加载无锚点时不触发，建议结合transition和可访问性优化使用。

如何在css中使用:target伪类_锚点元素样式应用

当页面URL中的片段标识符（即#后面的部分）与某个元素的id匹配时，:target伪类就会生效。这个特性可以用来高亮显示或动态展示特定内容，无需J*aScript就能实现简单的交互效果。

:target 选择器的基本用法

使用 :target 可以为当前锚点指向的元素添加特殊样式。浏览器会根据URL中的#值自动匹配对应id的元素。

例如，如果URL是 https://example.com/page.html#section1，那么 id="section1" 的元素就会被 :target 选中。

基本语法如下：

// 当前锚点指向的元素背景变黄 :target { background-color: yellow; }

实际应用场景示例

:target 常用于内容高亮、简易选项卡、模态框显示等场景。

1. 内容高亮

帮助用户快速定位到他们点击的章节或标题位置。

:target { background-color: #ffeb3b; padding: 2px; border-left: 4px solid #ff9800; }

2. 简易选项卡切换

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

通过隐藏非目标面板，只显示当前选中的内容块。

.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; }