新CSS僞類：focus-within

原文連接：點擊這裏 ，本文根據此文總結而來。

偶然間發現新的CSS僞類:focus-within，能很是方便處理獲取焦點狀態。

當元素自己或其後代得到焦點時，:focus-within僞類的元素就會有效。

沒看懂，能夠看下面的例子：

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>複製代碼

.container:focus-within { 
  background-color: #aaa; 
}複製代碼

若是div.container獲取到焦點時，就會有一個#aaa背景色。並且若是其後代元素得到焦點時，其背景色也會更改，因此<input>收到焦點時，div的背景色還是#aaa。

這樣，咱們就不須要實現這樣功能時，老是使用JavaScript，極大方便開發者。

可是，瀏覽器支持:focus-within仍是不多，不過相信很快，就會全面支持。

你們能夠看下面的gif動畫（在Firefox瀏覽器下實現）

能夠在支持的瀏覽器下，打開此codepen看看效果。

---

喜歡此文的同窗，能夠關注個人知乎專欄前端亂燉大雜燴