混淆CSS伪类：活动 [英] Confused by CSS pseudo-class :active
问题描述
我在CSS：主动选择器查找这里。
I was looking here at CSS :active Selector.
活动选择器样式链接到
活动页面
The :active selector styles links to active pages
这让我想起，什么是HTML / CSS术语中的活动页面...
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
此时，我去了 w3docs 部分：5.11.3动态伪类：：hover， ：active，and：focus。
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
活动伪类适用于
元素由$ b激活$ b用户。例如，在时间
之间，用户按下鼠标按钮，
释放它。
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
w3shools试试页面之一，并且一起举个例子，用下面的代码，你可以剪切&粘贴和尝试。
So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.
<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。但按钮或链接不适用于：活动。
The form field works for :focus. But the button or links don't work for :active.
为什么？有没有关于活动页面的东西我不明白w3schools谈到了。
Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.
我看到这个 nice tip 当Google搜索时，认为它是相关的。
I saw this nice tip when Googling for it, but I don't think it's related.
推荐答案
CSS中没有活动页面的概念。实际上， SitePoint参考通过说出：
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
伪类不会表示指向活动页面或当前页面的链接，这是CSS初学者中常见的误解。
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
规范说的是正确的：：active 激活，例如点击（如给定的示例）或以某种其他方式触发，以便浏览器开始导航到链接的目标。
What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.
请注意，它不仅适用于< a> 元素;它可以应用于任何非点击形式输入元素。例如，您可以这样做：
Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:
p:active {
color: red;
}
您点击的任何段落都会将其文字闪烁红色。
And any paragraph you click will flash its text red.
请注意，确切的定义和实现由浏览器决定，但一般来说 ，您可以依靠< a> 具有激活状态的元素。
Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.
这篇关于混淆CSS伪类：活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
