原文链接：点击这里 ，本文根据此文总结而来。
偶然间发现新的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看看效果。
喜欢此文的同学，可以关注我的知乎专栏前端乱炖大杂烩