問題描述
我在 這里查看 CSS :active Selector.
I was looking here at CSS :active Selector.
:active 選擇器樣式鏈接到活躍頁面
The :active selector styles links to active pages
這讓我想到，HTML/CSS 術(shù)語中的活動頁面"到底是什么...
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
此時我去了 w3docs 第 5.11.3 節(jié)動態(tài)偽類::hover、:active 和 :focus.
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
:active 偽類適用于一個元素被激活用戶.例如，在時間之間用戶按下鼠標(biāo)按鈕并釋放它.
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 try it pages 之一，并且編寫一個示例，替換以下代碼，您可以將其剪切 &粘貼并嘗試.
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.但按鈕或鏈接不適用于 :active.
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.
我看到了這個 不錯的提示，但我不認(rèn)為它是相關(guān)的.
I saw this nice tip when Googling for it, but I don't think it's related.
推薦答案
CSS中沒有活動頁面"的概念.事實上，SitePoint Reference 揭穿了這一點:
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
偽類不表示指向活動或當(dāng)前頁面的鏈接——這是 CSS 初學(xué)者常見的誤解.
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
規(guī)范說的是對的::active 只是設(shè)置激活元素的樣式，例如單擊(如給出的示例中)或以其他方式觸發(fā)，以便瀏覽器開始導(dǎo)航到鏈接的目標(biāo).
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.
但是請注意，確切的定義和實現(xiàn)由瀏覽器決定，但一般，您可以依賴具有激活狀態(tài)的 <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.
這篇關(guān)于被 CSS 偽類 :active 搞糊涂了的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！