原文链接： ，本文根据此文总结而来。

偶然间发现新的CSS伪类，能非常方便处理获取焦点状态。

当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。

没看懂，可以看下面的例子：

    
   
     Enter text   
      
    
复制代码

.container:focus-within {   background-color: #aaa; }复制代码

如果div.container获取到焦点时，就会有一个#aaa背景色。而且如果其后代元素获得焦点时，其背景色也会更改，所以<input>收到焦点时，div的背景色仍是#aaa。

这样，我们就不需要实现这样功能时，总是使用JavaScript，极大方便开发者。

但是，浏览器支持:focus-within还是很少，不过相信很快，就会全面支持。

大家可以看下面的gif动画（在Firefox浏览器下实现）

可以在支持的浏览器下，打开此看看效果。

喜欢此文的同学，可以关注我的知乎专栏