Question

我在CSS上寻找here：活跃的选择器。

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

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

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

：active伪类适用于一个元素正被激活用户。例如，在时间之间用户按下鼠标按钮发布它。

所以我使用了w3shools try it pages中的一个并且将一个例子放在一起，用下面的代码代替，你可以用它来剪切＆amp;粘贴并尝试。

<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。但是按钮或链接不适用于：活动。

为什么？是否存在关于“活动页面”的内容我不理解w3schools所讨论的内容。

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

Answer 1

CSS中没有“活动页面”的概念。实际上，SitePoint Reference通过说：

来揭穿这一点

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

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

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

p:active {
    color: red;
}

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

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

Answer 2

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

Answer 3

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

示例：

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

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

CSS伪类困惑：活跃

3 个答案: