focus和：active有什麼區別？

Question

:focus和:active僞類有什麼區別？

Answer 1

:focus和:active是兩種不同的狀態。

:focus表示當元素是當前選擇用於接收來自輸入設備（鍵盤）的輸入的元素時的狀態。 :active表示元素當前正由用戶激活的狀態。

讓我們以一個例子來說明這一點。假設我們有一個<button>。 <button>不會有任何狀態開始。它只是存在。如果我們使用標籤給「焦點」<button>，它現在進入其:focus狀態。如果您然後單擊（或按空間），然後您按鈕進入其（:active）狀態。

在那個筆記上，當你點擊一個元素時，你給它一個焦點，這也培養了:focus和:active是相同的錯覺。 他們不一樣。單擊時按鈕處於:focus:active狀態。

一個例子：

<style type="text/css"> 
 
    button { font-weight: normal; color: black; } 
 
    button:focus { color: red; } 
 
    button:active { font-weight: bold; } 
 
</style> 
 

 
<button> 
 
    When clicked, my text turns red AND bold!<br /> 
 
    But not when focused, where my text just turns red 
 
</button>

編輯：jsfiddle

Answer 2

：焦點是當一個元素能夠接受輸入 - 光標在一個輸入框或已被選中的鏈接上。

：active是元素被用戶激活時 - 用戶按下鼠標按鈕然後釋放它的時間。

Answer 3

:active  Adds a style to an element that is activated 
:focus  Adds a style to an element that has keyboard input focus 
:hover  Adds a style to an element when you mouse over it 
:lang   Adds a style to an element with a specific lang attribute 
:link   Adds a style to an unvisited link 
:visited  Adds a style to a visited link 

來源：CSS Pseudo-classes

Answer 4

聚焦只能通過鍵盤輸入來給出的，但是一個元件可以通過兩個被激活，鼠標或鍵盤。

如果用戶使用：專注於鏈接，則樣式規則只適用於按下鍵盤上的按鈕。

Answer 5

活動是當用戶激活該點時（如鼠標點擊，如果我們使用從字段到字段的選項卡沒有活動樣式的標誌，也許點擊需要更多時間，只需點擊該點），焦點在激活點後發生。試試這個：

<style type="text/css"> 
    input { font-weight: normal; color: black; } 
    input:focus { color: green; outline: 1px solid green; } 
    input:active { color: red; outline: 1px solid red; } 
</style> 

<input type="text"/> 
<input type="text"/> 

Answer 6

使用「焦點」會給鍵盤用戶鼠標用戶鼠標懸停時獲得的效果。需要「活動」才能在Internet Explorer中獲得相同的效果。

現實情況是，這些國家不適用於所有用戶。如果不使用全部三個選擇器，則會爲許多無法使用鼠標的鍵盤用戶創建可訪問性問題。我邀請你參加#nomouse挑戰賽（nomouse dot org）。

Answer 7

有四種情況。

1. 默認情況下，活動和焦點都關閉。
2. 當你標籤週期通過可聚焦元件，他們將進入:focus（沒有活動）。
3. 當你點擊在非可對焦元素，它進入:active（沒有焦點）。
4. 當你點擊在可調焦元件它進入:active:focus（同時激活和聚焦）。

例子：

<div> 
    I cannot be focused. 
</div> 

<div tabindex="0"> 
    I am focusable. 
</div> 

---

div:focus { 
    background: green; 
} 

div:active { 
    color: orange; 
} 

div:focus:active { 
    font-weight: bold; 
} 

頁面加載時都是在情況1.當您按下選項卡中，將集中在第二個div，看看它表現出的情況下2。當您點擊第一個div時，您會看到案例3.當您單擊第二個div時，您會看到案例4.

---

元素是否可以聚焦是another question。大多數不是默認的。但是，默認情況下，可以安全地假設<a>,<input>,<textarea>是可以關注的。