一、了解CSS :focus-within伪类选择器
CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干嘛干嘛,而:focus-within表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。
举个例子:
form:focus {
outline: solid;
}
表示仅仅当
处于focus状态时候,元素outline出现。form:focus-within {
outline: solid;
}
表示
元素自身,或者内部的子元素处于focus状态时候,元素outline出现。换句话说,子元素focus,可以让任意父级元素样式发生变化。这个新特性的支持,未来势必会带来更加丰富的交互形式,以及特定场景简化我们实现。
兼容性
兼容性如下截图:
还是挺喜人的。
二、CSS :focus-within伪类选择器实际应用举例
1. 表单输入勿扰模式
当我们表单输入,选择或者进行交互时候,页面上表单以为其他内容全部都不可见。
CSS代码如下:
form {
outline: 2000px solid