DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元免费积分!
CSS 中的 :any-link
伪类提供了一种选择作为超链接源锚点的元素的方法。
如果术语“源锚点”让你迷糊,它只是 HTML 元素 <a>
、<link>
和 <area>
上的 href
属性的别称。(为什么你需要在 CSS 中定位 <area>
或 <link>
超出我的理解范围,但嘿。)HTML 规范 还有更多关于这方面的信息。
接受并包含 href
属性的元素是超链接,并且将使用 :any-link
进行选择。这成为选择所有基于链接的 HTML 元素的便捷方法,这些元素可能看起来不相关且没有接触标记。也许它的存在是因为你可能认为 :link
会选择所有链接,但它会错过 :visited
,所以这将它们全部包在一起。
从功能上讲,它就像属性选择器 [href]
。
<a href="/link/to/thing">Howdy!</a>
:any-link {
color: red;
font-weight: 900;
text-decoration: none;
}
值得注意的是,我们也可以使用 :matches()
伪类选择相同的 HTML 元素。例如,:matches(:link, :visited)
将选择与 :any-link
相同的元素。
需要注意的另一件事是,在撰写本文时,规范目前正在要求为该选择器提供替代名称建议。虽然尚不清楚名称是否会更改,但 :matches()
伪类以前被称为 :any()
,这可能是一个迹象。
浏览器支持
:any-link
伪元素被认为是实验性功能,并且是当前处于工作草案状态的选择器级别 4 规范的一部分。
为了获得完全支持,您需要使用带有前缀的它
:-webkit-any-link {
}
:-moz-any-link {
}
:any-link {
}
请记住不要用逗号分隔这些选择器以组合它们,因为浏览器会丢弃它们不理解的部分的选择器。
此浏览器支持数据来自 Caniuse,其中有更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
15* | 3* | 否 | 79 | 6.1* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4* | 6.0-6.1* |
更多信息
- 选择器级别 4 规范(工作草案)
- Mozilla 文档