:target

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 :target 伪类选择器在 URL 中的哈希值与元素的 ID 相同的情况下匹配。例如,如果当前 URL 为

https://css-tricks.org.cn/#voters

并且 HTML 中存在以下内容:

<section id="voters">Content</section>

此选择器将匹配

:target { background: yellow; }

并且该 section 元素将具有黄色背景。

对于这种通用的选择器(匹配任何碰巧是目标的内容),如果 URL 更改为以 #faq 结尾,并且存在另一个 ID 为 faq 的元素,则该选择器将再次匹配,并且 #faq 元素将具有黄色背景。

您可以通过明确指定要定位的元素来限制它,例如通过 ID 选择 :target

#voters:target {
  /* Style it up */
}

何时使用它?

一种可能性是当您想要使用“状态”样式时。当页面具有某个哈希值时,它处于该状态。它不像操作类名那样通用(因为只能有一个,并且它只能与一个元素相关),但它类似。您可以在更改类以更改状态时执行的任何操作,都可以在元素处于 :target 状态时执行。例如:更改颜色、更改位置、更改图像、隐藏/显示内容,等等。

对于何时 :target 是一个好的选择,我建议使用以下经验法则

  1. 当需要“状态”时
  2. 当向下跳转/哈希链接行为可以接受时
  3. 当影响浏览器历史记录是可以接受时

如何在 URL 中获取哈希值?

最常见的方法是用户点击包含哈希值的链接。可以是内部(同一页面)链接,也可以是碰巧以哈希值和值结尾的完整限定 URL。示例

<a href="#voters">Go To There</a>

<a href="http://example.com/#specific-part">Go To There</a>

跳转行为

无论它是同一页面链接还是其他链接,**浏览器的行为都是滚动页面,直到该元素位于页面顶部**。或者,如果无法滚动那么远,则滚动尽可能远。这非常重要,因为这意味着利用这种“状态”行为有点棘手/有限。

例如,我曾经尝试过各种技术来复制功能性 CSS 选项卡,但最终决定使用复选框技巧是一个更好的主意,因为它避免了页面跳转问题。CSS Science 的 Ian Hansson 也有一些选项卡示例。他的第三个示例使用 :target 和绝对定位的元素,这些元素隐藏在页面顶部上方以防止页面跳转行为。这很巧妙,但不是一个完美的解决方案,因为这意味着如果选项卡在页面上的更下方,页面将向上跳转。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
9全部全部全部全部全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部全部全部全部
来源:caniuse

更多信息