奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 > HTML5 >

简述:focus-within伪类

时间:2018-08-02 16:43来源: 作者:Vuez
伪类从最开始的a标签伪类家族,到近些年火起来的:after、:before。

伪类从最开始的a标签伪类家族,到近些年火起来的:after、:before

它们在不需要JavaScript的情况,就可以实现鼠标滑过切换颜色、父盒子滑过直接用样式就显示子盒子。

今天要介绍的是focus-within,输入框对焦后,如果在父盒子有使用这个伪类就会触发里面的样式。对就是冒泡

先来一段代码
<style type="text/css">         .input_box:focus-within{color: red}     </style>
再来张图好好感受下



是不是是不是心动了。

别急,火狐浏览器才支持,玩新的肯定要考虑兼容性啦!

再给几个其它选择器 ~ 和 + ,考考大家这些是做什么用的?

对,

它们就是兄弟选择器,用它可以省略js操作带来的性能问题。

让我们一起做兄弟把! (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-08-02 16:08

关注奔三路小程序,方便你我他