CSS伪类家族中，有个伪类focus为什么还要出一个focus-within

众所周知，在CSS伪类家族中，有一个聚焦的伪类:focus。部分人可能对伪类:focus-within略显得陌生。没有关系，我们一起来关注一下这个伪类， 用三分钟时间，就可以完全将它记在脑海里。

从三个方面来记住它，概念，使用场景和兼容性情况。

一，概念

区别于伪类focus。foucs是对于当前元素，而focus-within则是对于当前对象和当前对象子元素。也就是说这个伪类作用在使用了foucs-within的元素成为焦点或它的子元素成为焦点时显现。

二，主要看一下它的使用场景

第一， 让表单在交互时背景高度

关键代码如下：

效果是下面这样的：

第二，表单输入时，除表单其它元素隐藏

关键代码如下：

效果是这样的：

第三，让记数的文本域高亮

关键代码如下：

效果如下：

有关使用场景就举这三个，当然，还有很多其它应用场景，这里主要是为了更多好的理解这个伪类。通过这三个使用场景也足够让我们记住它了。

三，关于兼容性问题

相较于focus来说还是显得有点少，不过相信很快就会全面支持。

最后总结一下：

上面使用场景的完整代码，如感兴趣，可以直接到下面这个地址上找：

https://github.com/wenpingzheng/front-end-thinking/blob/master/js-methods/js-jc.html