被 CSS 伪类 :active 弄糊涂了答案

【问题标题】：Confused by CSS pseudo-class :active被 CSS 伪类 :active 弄糊涂了
【发布时间】：2015-11-23 04:23:35
【问题描述】：

我在 CSS :active Selector 上查看 here。

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

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

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

:active 伪类适用于一个元素被激活用户。例如，在时间之间用户按下鼠标按钮并释放它。

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

<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 谈到的“活动页面”有什么我不明白的地方吗？

我在谷歌搜索时看到了这个nice tip，但我认为它不相关。

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

CSS 中没有“活动页面”的概念。事实上，SitePoint Reference 揭穿了这一点：

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

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

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

p:active {
    color: red;
}

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我已经明白了。正是 w3schools 提出的误导性活动页面让我大吃一惊。 @zzzBov &@BoltClock 已经在上面介绍过

【解决方案3】：

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

例子：

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

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

【讨论】：