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
是一个好的选择,我建议使用以下经验法则
- 当需要“状态”时
- 当向下跳转/哈希链接行为可以接受时
- 当影响浏览器历史记录是可以接受时
如何在 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
和绝对定位的元素,这些元素隐藏在页面顶部上方以防止页面跳转行为。这很巧妙,但不是一个完美的解决方案,因为这意味着如果选项卡在页面上的更下方,页面将向上跳转。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
9 | 全部 | 全部 | 全部 | 全部 | 全部 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 |
更多信息
- 选择器级别 4 规范
- 关于
:target
(CSS-Tricks) - 用于屏幕外设计的 CSS
:target
(CSS-Tricks) - 在选择器中使用
:target
伪类 (MDN) - 使用 :target 创建简单的图片库 (Chris Heilmann)
- 演示:黄色渐变技巧 (Web Designer Notebook)
这非常有用,我使用了这些信息以及您提供的关于“:nth-of-type”的信息来创建一个具有“显示/隐藏”功能的内容限制器。这是链接,请告诉我您的想法。
似乎链接一个 CSS 目标的页面已不存在。
关于
:target
还有一个问题…如何在 JavaScript 中聚焦由
:target
激活的区域内的元素?我发现,在其他情况下,我们只需在“click”
eventListener
上放置event.preventDefault()
就可以聚焦输入,但显然如果我这样做,它会杀死target
的行为。