CSS :focus-within 的作用和用法

:focus-within 是一个新的CSS伪类( pseudo-class)，它跟 :focus 、 :hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。

先看看下面的代码演示，请使用tab键切换下面例子中的焦点元素：

上面的例子中，.my-element 元素是一个div, 它本身是不会成为焦点的，除非给它设置tabindex属性。但当它内部的链接或那个input元素成为焦点时，你会看到div元素会出现一个3px的边线。

Focus-within 用法例子

:focus-within 是一个非常有用的伪类，你不能随便的往某个元素添加这个样式，因为任意一个子元素变成焦点都会激活这个伪类的样式，:focus-within 应该被单独的用，而不是用在一个拥有很多可焦点化子元素的元素里。

很多常见的UX交互设计能从:focus-within中获益，特别是之前需要使用JavaScript实现的功能，现在可以使用:focus-within替换。

1、高亮表格行

一个常见的例子：表格行当光标悬停时改变背景色，这可以帮助用户更好的观察复杂的表格，针对鼠标用户这很容易实现，但如果用户单纯使用键盘，不用JavaScript就很难实现，但现在不同了：

上面的例子中我们用 :focus-within pseudo-class 实现了高亮表格行的效果，它不能是鼠标悬停时能高亮，当你使用tab键切换焦点是也能高亮。这种实现要求在行里至少存在一个可以成为焦点的元素。

上面的例子里最关键的代码是下面这段：

tbody tr:focus-within,
tbody tr:hover {
  background: rgba(lightBlue, .4);
}

2、下拉菜单的实现

当学习 :focus-within 的用法时，我首先想到的使用场景是下拉菜单，不用JavaScript，使用:focus-within 来实现。

注意:
上面的这个例子并没有实现自适应布局，也没有对触屏设备进行优化，如果想在触屏设备上使用，估计还是需要JavaScript的配合。但请记住，JavaScript并不会损害使用友好性，但错误的JavaScript运用会！