WEB初學者：新偽類focus-within使用方法講解

08-17

CSS的世界真是一個神奇的世界。可能眾多前端開發者聽說過 :focus 並未聽說過 :focus-within 。那麼 :focus-within 是什麼鬼。這篇文章，我們就說說 :focus-within 這個新偽類。

在CSS中 :focus-within 是一個偽類，現在已經被列入到CSS選擇器中（CSS Level 4 selector）。它就像你知道的

:focus 或者 :hover 。 :focus-within 能非常方便處理獲取焦點狀態。當元素本身或其後代元素獲得焦點時，

:focus-within 偽類的元素就會有效。

先看個簡單的案例（表格行當游標懸停時改變背景色，這可以幫助用戶更好的觀察複雜的表格，針對滑鼠用戶這很容易實現）：

:focus-within 非常強大，主要是由於偽類在它的任何元素獲取到焦點時都將被激活。當元素包含許多子組件的元素上謹慎使用該偽類。

有了 :focus-within 之後，有一些常見的交互行為就變得非常的簡單，特別是以前需要JavaScript的鍵盤事件的交互行為，我們都可以使用 :focus-within 來替代。

荊州雲客秀網路科技有限公司

http://www.yunkexiu.com