开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲，区别在于:focus表示当前元素处于focus状态的时候干嘛，而:focus-within表示当前元素或者当前元素的子元素处于focus状态的时候干嘛（选择一个包含具有:focus 的任何子元素的元素）。
举个栗子
form:focus {
background-color: beige;
}
表示仅仅当<form>处于focus状态时候，background变beige。
form:focus-within {
background-color: beige;
}
表示<form>元素自身，或者<form>内部的子元素处于focus状态时候，background变beige。换句话说，子元素focus，可以让任意父级元素样式发生变化。
可以根据子元素的状态来改变父元素的样，根据这个属性我们可以用这个属性来丰富我们的交互场景。
各个浏览器兼容性
兼容更新时间 【2022-12-06】
