在網站開發中，確保用戶能夠輕松地瀏覽和操作頁面是非常重要的。CSS 焦點樣式是一種有效的方式，可以直觀地展示頁面中哪個元素被選中了。

本文介紹了 4 種處理 CSS 焦點樣式的方式，每種方式都附有簡單的示例，幫助你快速掌握這些技巧。

什么是 CSS 焦點樣式？

CSS 焦點樣式是一種視覺效果，用于突出顯示頁面中當前被選中的元素。它對使用鍵盤、屏幕閱讀器或其他輔助工具導航的網站用戶尤為重要。

良好的焦點樣式可以顯著提升網站的可訪問性，讓用戶更方便地交互。

1. :focus

:focus 選擇器在元素被選中（如通過點擊或鍵盤切換）時生效。

/* 為選中的元素添加樣式 */
input:focus, textarea:focus, button:focus {
    outline: 2px solid blue; /* 為選中元素添加藍色邊框 */
}

說明：

當用戶點擊或使用鍵盤選中 input、textarea 或 button 時，藍色的邊框會出現，明確地指示當前的焦點位置。

2. :focus-visible

:focus-visible 是一種更智能的焦點樣式，只在需要時（通常是鍵盤導航）顯示，避免鼠標點擊時觸發焦點效果。

/* 僅鍵盤操作時顯示的焦點樣式 */
input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid green; /* 鍵盤導航時顯示綠色邊框 */
}

說明：

使用 :focus-visible，當用戶通過鍵盤導航到某個元素時，會顯示綠色邊框；而通過鼠標點擊時不會觸發，這樣可以保持頁面更整潔。

3. :focus-within

:focus-within 是一種父級樣式，當其子元素獲得焦點時，父級會被應用樣式。

/* 為包含選中子元素的容器添加樣式 */
.form-container:focus-within {
    border: 2px solid purple; /* 為容器添加紫色邊框 */
}

說明：

如果 form-container 中的任意子元素（如輸入框）獲得焦點，整個容器會添加紫色邊框。這種方式非常適合表單設計，突出顯示當前交互區域。

4. 自定義組合焦點樣式（:focus-visible-within）

雖然 CSS 沒有直接提供 :focus-visible-within，但我們可以通過組合 :focus-visible 和 :focus-within 來實現類似效果。

/* 清除默認焦點樣式 */
:focus-visible, :focus-within {
    outline: none;
}

/* 自定義焦點樣式 */
:focus-visible:focus-within {
    border: 2px solid orange; /* 為選中元素及其容器添加橙色邊框 */
}

說明：

此方案先移除默認的 outline 樣式，保持頁面簡潔，然后通過組合選擇器為選中元素及其容器添加橙色邊框，使視覺效果更加美觀。

總結

良好的焦點樣式設計可以提升網站的用戶體驗，尤其是對依賴鍵盤或輔助技術的用戶。以下是 4 種主要焦點樣式的特點：

• **:focus**：基礎焦點樣式，用于所有選中元素。
• **:focus-visible**：僅在鍵盤導航時顯示焦點樣式。
• **:focus-within**：為容器及其子元素提供樣式支持。
• 自定義組合樣式：結合 :focus-visible 和 :focus-within，實現更精細的焦點樣式。

結合實際需求應用這些方法，為你的用戶打造更加友好的網頁體驗！