新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看看效果。

---

喜歡此文的同學，可以關注我的知乎專欄前端亂燉大雜燴