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

---

喜欢此文的同窗，能够关注个人知乎专栏前端乱炖大杂烩