:focus-within 是一個css偽類，當元素自身或其任意后代獲得焦點時觸發樣式變化。1. 它與 :focus 的區別在于：:focus 僅在自身獲得焦點時生效，而 :focus-within 在其子元素獲得焦點時也會生效；2. 可用于提升表單體驗，例如高亮整個表單字段容器；3. 在可訪問性方面，有助于鍵盤用戶明確當前操作區域，如高亮自定義下拉菜單；4. 對于兼容性問題，可通過JavaScript polyfill 實現對舊瀏覽器的支持。
:focus-within 偽類，簡單來說，就是當父元素內部的任何子元素獲得焦點時，允許你修改父元素的樣式。這在增強用戶體驗和創建更具交互性的Web界面方面非常有用。
首先，理解 :focus 和 :focus-within 的區別至關重要。:focus 僅在元素自身獲得焦點時觸發，而 :focus-within 則在元素自身或其任何后代獲得焦點時觸發。
如何使用 :focus-within 創建更好的表單體驗？
表單是Web應用中常見的交互元素。使用 :focus-within 可以更清晰地指示用戶當前正在與哪個表單字段交互。例如，可以高亮顯示整個表單字段容器，而不僅僅是輸入框本身。
立即學習“前端免費學習筆記（深入）”；
.form-group:focus-within { border: 2px solid blue; box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group { margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; } .form-group input { width: 100%; padding: 8px; box-sizing: border-box; /* 確保padding不影響元素總寬度 */ }
這個例子中，當 .form-group 內的任何元素（例如 input）獲得焦點時，.form-group 的邊框會變為藍色，并添加一個陰影。這能給用戶提供清晰的視覺反饋。當然，實際應用中，你可能需要根據你的設計調整顏色和樣式。
:focus-within 在可訪問性方面的作用是什么？
可訪問性是Web開發中非常重要的考量因素。:focus-within 可以用來改善鍵盤用戶的導航體驗。通過清晰地指示哪個元素組當前處于活動狀態，可以幫助用戶更容易地理解頁面的結構。
比如，一個包含多個選項的自定義下拉菜單，可以使用 :focus-within 來高亮顯示整個菜單容器。
<div class="custom-dropdown"> <button>選擇一個選項</button> <ul> <li>選項1</li> <li>選項2</li> <li>選項3</li> </ul> </div>
.custom-dropdown:focus-within { background-color: #f0f0f0; } .custom-dropdown { border: 1px solid #ccc; padding: 10px; } .custom-dropdown ul { list-style: none; padding: 0; margin: 0; } .custom-dropdown li { padding: 5px; cursor: pointer; }
在這個例子中，當下拉菜單中的任何元素（例如按鈕或列表項）獲得焦點時，整個 .custom-dropdown 容器的背景顏色會改變。
如何處理 :focus-within 的兼容性問題？
盡管 :focus-within 在現代瀏覽器中得到了廣泛支持，但在一些舊版本的瀏覽器中可能無法正常工作。為了確保你的網站在所有瀏覽器中都能提供一致的體驗，可以使用 polyfill。
一個常見的 polyfill 是使用 JavaScript 來模擬 :focus-within 的行為。
(function() { var matches = Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; if (!matches) { console.warn('Your browser does not support Element.matches.'); return; } document.addEventListener('focus', function(e) { var target = e.target; while (target && target !== document.body) { if (matches.call(target, ':focus-within')) { target.classList.add('focus-within'); } target = target.parentNode; } }, true); document.addEventListener('blur', function(e) { var target = e.target; while (target && target !== document.body) { if (matches.call(target, ':focus-within')) { target.classList.remove('focus-within'); } target = target.parentNode; } }, true); })();
這段代碼監聽 focus 和 blur 事件，并向上遍歷 dom 樹，如果找到與 :focus-within 選擇器匹配的元素，則添加或移除 focus-within 類。然后，你可以使用 css 來定義 focus-within 類的樣式。注意，這個polyfill依賴于 Element.matches 方法，如果瀏覽器不支持，需要提供相應的polyfill。
總的來說，:focus-within 是一個強大的 CSS 偽類，可以用來改善用戶體驗和可訪問性。雖然需要注意兼容性問題，但通過使用 polyfill，可以在大多數瀏覽器中獲得一致的行為。
