css伪类之focus-within

[chenxiaochun]

看到此伪类，你可能首先会想到css中的另一个伪类:focus，它们的作用确实是很类似。但不同的是，:focus-within不仅仅能匹配到自身获取焦点的状态，也能匹配到它的所有子元素获取到焦点的状态。
🤔，没明白我在说什么？接着往下看。

下面是它的浏览器兼容情况，看起来不太乐观，所以以下示例你只能在firefox中运行查看。

直接看示例代码，加上tabindex属性可以让box元素在你按tab键或者鼠标点击它时能获得焦点。

<div class="box" tabindex="0"> 
  <label for="text">Username: </label> 
  <input id="text" type="text" />
</div>

.box{
    padding: 10px;
}
.box:focus-within {
  background-color: skyblue; 
}

正常情况下，运行结果是这样：

接下来你会发现，无论你是直接点击文本框，还是点击box元素，它的背景色都会变成skyblue。现在应该明白我上面的解释了吧，这也是它与:focus的最大区别。

可以直接体验codepen示例

其它文章：

• https://juejin.im/post/5b62839d6fb9a04fd260af17