CSS 的 :focus 和 :active 偽類有什麼不同？

:focus 和:active 偽類之間的區別

理解:focus 和:active 狀態之間的區別在使用時至關重要CSS。這些偽類代表與 HTML 元素互動時發揮作用的不同元素狀態。

什麼是 :focus？

:focus 狀態表示元素具有接收輸入焦點。當元素接收鍵盤輸入或使用者使用其他可聚焦機制選擇它時，通常會觸發此狀態。表單元素（:input、:button、:a）、frame/:iframe 等元素的行為方式如下。

什麼是 :active？

:active 狀態表示目前被使用者啟動的元素。這種狀態在互動場景中很常見，例如當使用者點擊按鈕或按鍵時。例如，按鈕通常在單擊並釋放時進入 :active 狀態。

如何區分 :focus 和 :active

雖然當元素處於clicked、:focus 和 :active 是不同的狀態。當使用者點擊某個元素時，它會同時接收焦點和激活，從而導致 :focus:active 狀態。然而，這些狀態可以獨立觸發。例如，一個元素可以在不啟動的情況下獲得焦點（例如，使用 Tab），反之亦然。

範例

考慮以下HTML 和CSS 程式碼：

當您將焦點放在按鈕上（使用選項卡）而不單擊它時，文字只會變成紅色。當您按一下該按鈕時，文字將變為紅色且粗體，表示該按鈕已獲得焦點並被啟動。

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