在选择器中使用 :target 伪类

当 URL 指向文档的特定部分时，用户可能难以注意到它。了解如何使用一些简单的 CSS 来吸引用户注意 URL 的目标，并改善用户体验。

选择目标

伪类伪类 :target 用于设置包含片段标识符的 URL 的目标元素的样式。例如，URL `https://mdn.org.cn/en-US/docs/Web/CSS#reference` 包含片段标识符 `#reference`。在 HTML 中，标识符作为 `id` 或 `name` 属性的值出现，因为两者共享相同的命名空间。因此，示例 URL 将指向该文档中的“reference”标题。

假设您希望设置任何作为 URL 目标的 `h2` 元素的样式，但不想让任何其他类型的元素获得目标样式。这很简单

css

h2:target {
  outline: 2px solid;
}

也可以创建特定于文档特定片段的样式。这是使用 URI 中找到的相同标识值完成的。因此，要为 `#reference` 片段添加背景颜色，我们将编写

css

#reference:target {
  background-color: yellow;
}

定位所有元素

如果目的是创建将应用于所有目标元素的“通用”样式，则可以使用通用选择器。

css

:target {
  color: red;
}

示例

在以下示例中，有五个链接指向同一文档中的元素。例如，选择“First”链接将导致 `<h1 id="one">` 成为目标元素。请注意，文档可能会跳转到新的滚动位置，因为目标元素如果可能，将放置在浏览器窗口的顶部。

html

<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

结论

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

另请参阅

:target