點擊右上方紅色按鈕關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

眾所周知，在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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！