学习
实践
活动
工具
TVP
写文章

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180524A1TBKB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券