CSS的focus-within伪类

原创 1948712434 随笔 CSS 21阅读 10 天前 举报

CSS的focus-within伪类

focus-within是什么?

从字面的意思我们看一看出(焦点-在内)的意思,可能很多人都对这个focus-within伪类很陌生,确实以为它的兼容性不是很好,如果是抛开ie就是一个很好的伪类了。MDN解释:focus-within 是一个CSS 伪类 ,表示一个元素获得焦点,或,该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代匹配:focus伪类。(在shadow trees 中的后代也在匹配序列中),MDN解释focus-within

focus-within的作用

作用可大了,它可以测试到使用这个伪类的元素的后代是否获取到焦点
例子:

上面的例子是演示了当表单内的元素获取到了焦点的时候,表单上方的小方块的背景颜色转换,还有表单的div内的input获取到了焦点,该div内的color:red;其实还有很多的妙用之处。比如切换图片。

兼容性

主流浏览器中只有ie是不支持这个伪类的。所以使用的时候有点悬。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复