css伪类:target锚点定位样式实现_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-24

浏览次数：次

:target伪类可选中URL锚点指向的元素并添加样式。当页面URL含#片段标识符时，ID与之匹配的元素被高亮，如h2:target设置背景色和边框，实现无需J*aScript的交互效果，常用于内容展开、选项卡切换和错误定位，需注意ID唯一性和浏览器兼容性，适用于静态页面增强用户体验。

css伪类:target锚点定位样式实现

当页面 URL 包含一个片段标识符（即以 # 开头的锚点），浏览器会尝试滚动到 ID 与该片段匹配的元素。利用 CSS 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，实现简单的交互效果而无需 J*aScript。

:target 是一种 CSS 伪类，用于选中当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的哈希值相同时，该伪类才会生效。

例如：URL 为 page.html#section2，则 ID 为 section2 的元素会被 :target 选中。

使用方式非常简单，只需在选择器后加上 :target 即可定义目标元素的高亮样式。

HTML 结构：

<h2 id="intro">简介</h2>
<p>这里是简介内容...</p>
<p><h2 id="setup">安装步骤</h2>
<p>这里是安装说明...</p></p><p><a href="#intro">跳转到简介</a>
<a href="#setup">跳转到安装步骤</a>

CSS 样式：

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

h2:target {
  background-color: yellow;
  padding: 5px;
  border-left: 4px solid red;
}

点击链接后，对应的标题背景变黄，左侧出现红色边框，视觉上突出显示当前定位部分。

:target 不仅可用于高亮文本，还能实现一些轻量级交互：

示例：点击链接展开内容

.hidden-content {
  display: none;
}
<p>.section:target .hidden-content {
display: block;
}

当用户点击指向某个 section 的链接时，其内部的 hidden-content 会显示出来。

虽然 :target 功能简洁有效，但使用时需注意以下几点：

基本上就这些。合理使用 :target 能提升用户体验，尤其适合文档、帮助页面等静态内容的锚点增强。不复杂但容易忽略的小技巧。

以上就是css伪类:target锚点定位样式实现的详细内容，更多请关注其它相关文章！

上一篇：如何通过css Flexbox实现响应式网格