什麼時候使用 :focus 和 :active 偽類？

區分 :focus 和 :active 偽類

雖然 :focus 和 :active樣式狀態都可以透過使用者互動激活，它們的功能不同

:focus

• 表示已接收輸入焦點並準備好接受使用者輸入的元素。
• 當使用鍵盤導航選擇元素，例如選項卡鍵。

:active

• 表示使用者主動點擊或點擊的元素。
• 通常伴隨：當元素透過 a 接收焦點時的焦點狀態click。

主要區別

• ：focus 表示已選擇一個元素進行輸入，而 :active 表示單擊或點擊操作正在進行中。
• ：焦點由基於鍵盤的互動觸發，而 :active 則由滑鼠或基於觸控觸發事件。
• 當點擊某個元素時，它通常會在 :focus 和 :active 狀態之間轉換。

範例

考慮以下HTML 和CSS 程式碼：

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

當按鈕最初呈現時，它有無活動或焦點狀態。當使用者使用 Tab 為其提供焦點時，它進入 :focus 狀態並且文字變為紅色。如果使用者隨後按一下該按鈕，它將進入 :active 狀態，導致文字變為紅色且粗體。

以上是什麼時候使用 :focus 和 :active 偽類？的詳細內容。更多資訊請關注PHP中文網其他相關文章！