选择目标

:target 伪类用于为文档中通过 URL 片段标识符确定的目标元素设置样式。例如，URL https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考 包含片段标识符 #参考。在 HTML 中，标识符通常作为 id 或 name 属性的值出现，因为这两个属性共享同一命名空间。因此，上述示例 URL 将指向该文档中 id 为 参考 的元素。

若要为作为 URL 目标的任何 h2 元素设置样式，同时不影响其他类型的元素使其获得目标样式，请将 :target 伪类与类型选择器结合使用：

cssh2:target {

outline: 2px solid;

}

同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #参考 文档片段中加入背景颜色，我们可以通过如下代码实现：

css#参考:target {

background-color: yellow;

}

定位所有元素

如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：

css:target {

color: red;

}

示例

在以下示例中，5 个链接指向了同一文档中的元素。例如，选择链接“一”会导致

成为目标元素。注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。

html

…

…

… …

一

二

三

四

五

结论

当片段标识符指向文档的某一部分时，读者可能会对应该阅读文档的哪一部分感到困惑。通过对 URI 的目标进行样式设置，可以减少或消除读者的困惑。

参见

:target

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何参与贡献

此页面最后更新于 2026年5月13日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题