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

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

什么是 CSS 焦點樣式？

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

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

1. :focus

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

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

說明：

當(dāng)用戶點擊或使用鍵盤選中 input、textarea 或 button 時，藍(lán)色的邊框會出現(xiàn)，明確地指示當(dāng)前的焦點位置。

2. :focus-visible

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

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

說明：

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

3. :focus-within

:focus-within 是一種父級樣式，當(dāng)其子元素獲得焦點時，父級會被應(yīng)用樣式。

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

說明：

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

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

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

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

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

說明：

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

總結(jié)

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

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

結(jié)合實際需求應(yīng)用這些方法，為你的用戶打造更加友好的網(wǎng)頁體驗！