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

---

喜欢此文的同学，可以关注我的知乎专栏前端乱炖大杂烩