點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
眾所周知，在CSS偽類家族中，有一個聚焦的偽類:focus。部分人可能對偽類:focus-within略顯得陌生。沒有關係，我們一起來關注一下這個偽類， 用三分鐘時間，就可以完全將它記在腦海裡。
從三個方面來記住它，概念，使用場景和兼容性情況。
一，概念
區別於偽類focus。foucs是對於當前元素，而focus-within則是對於當前對象和當前對象子元素。也就是說這個偽類作用在使用了foucs-within的元素成為焦點或它的子元素成為焦點時顯現。
二，主要看一下它的使用場景
第一， 讓表單在交互時背景高度
關鍵代碼如下：
效果是下面這樣的：
第二，表單輸入時，除表單其它元素隱藏
關鍵代碼如下：
效果是這樣的：
第三，讓記數的文本域高亮
關鍵代碼如下：
效果如下：
有關使用場景就舉這三個，當然，還有很多其它應用場景，這裡主要是為了更多好的理解這個偽類。通過這三個使用場景也足夠讓我們記住它了。
三，關於兼容性問題
相較於focus來說還是顯得有點少，不過相信很快就會全面支持。
最後總結一下：
上面使用場景的完整代碼，如感興趣，可以直接到下面這個地址上找：
https://github.com/wenpingzheng/front-end-thinking/blob/master/js-methods/js-jc.html
分享到:
閱讀更多 小鄭搞碼事 的文章
