8

我在这里查看 CSS :active Selector。

:active 选择器样式链接到活动页面

这让我想到，HTML/CSS 术语中的“活动页面”到底是什么……

此时我去了w3docs部分：5.11.3 动态伪类：:hover、:active 和 :focus。

:active 伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。

因此，我使用了w3shools 中的一个 try it 页面并编写了一个示例，替换为以下代码，您可以剪切并粘贴并尝试。

<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>

<body>
<p>Click the links to see the background color become yellow:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>

表单域适用于 :focus。但是按钮或链接不适用于 :active。

这是为什么？是否有关于“活动页面”的内容我不明白 w3schools 谈到了。

我在谷歌搜索时看到了这个不错的提示，但我认为它不相关。

4

3 回答 3

26

CSS 中没有“活动页面”的概念。事实上，SitePoint 参考通过以下方式揭穿了这一点：

伪类并不表示指向活动或当前页面的链接——这是 CSS 初学者常见的误解。

规范所说的是正确的：简单地设置被激活:active的元素，例如单击（如给出的示例中）或以其他方式触发，以便浏览器开始导航到链接的目标。

请注意，它不仅适用于<a>元素；它可能适用于任何被点击的非表单输入元素。例如，您可以这样做：

p:active {
    color: red;
}

您单击的任何段落都会将其文本闪烁红色。

但是请注意，确切的定义和实现由浏览器决定，但通常，您可以依赖<a>具有激活状态的元素。

于 2011-02-18T18:56:38.603 回答
1

:activea是当鼠标按住时赋予元素（或按钮）的样式。当您单击样式按钮时，您可能已经在某些网站上看到它；当您实际单击按钮时，它可能会改变。这是:active伪类。

于 2011-02-18T18:58:18.633 回答
0

我一直使用:active链接。在浏览器将您带到您刚刚单击的页面之前的一瞬间，文本将更改为您调用的颜色a:active{ ... }

例子：

a:active { color:pink; font-weight:bold; }

大多数浏览器都支持它，但真的不值得你花时间去设计它。回到 56k 拨号的时代，必须直观地显示用户单击的链接正在加载是一件好事。

于 2011-02-18T19:00:16.483 回答