CSS中的focus-within伪类选择器

css中:focus-within是什么

在CSS中 :focus-within 是一个伪类，现在已经被列入到CSS选择器中（CSS Level 4 selector）。CSS中伪类:focus-within能非常方便处理获取焦点状态，当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。

没看懂，可以看下面的例子：

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>

<style>
.container:focus-within { 
  background-color: #aaa; 
}
</style>

如果div.container获取到焦点时，就会有一个#aaa背景色。而且如果其后代元素获得焦点时，其背景色也会更改，所以<input>收到焦点时，div的背景色仍是#aaa。这样，我们就不需要实现这样功能时，总是使用JavaScript，极大方便开发者。

:focus-within的使用场景

:focus-within 非常强大，主要是由于伪类在它的任何元素获取到焦点时都将被激活。当元素包含许多子组件的元素上谨慎使用该伪类。有了 :focus-within 之后，有一些常见的交互行为就变得非常的简单，特别是以前需要JavaScript的键盘事件的交互行为，我们都可以使用 :focus-within 来替代。接下来，咱们来看一些 :focus-within 的常见示例。

1、表格行的高亮

一个常见的例子，就是表格行高亮的行为，即鼠标悬浮在表格的行时，颜色变得高亮。这样的交互样式可以帮助有视力阻碍的用户能更好的阅读一个复杂的表格或长表格。因为突出的显示，可以使用这些用户更容易地跟踪他们当前正在阅读的表格行。以前常常实现的方式是通过 :hover 来改变表格行的样式，这种方案对于正常的用户而言是一件易事，但如果你的用户对于一些操作鼠标有阻碍的用户而言，那 :hover 就有点蛋疼了。如果你是追求完美的话，你可能会通过JavaScript的键盘事件给表格行添加样式。

那么有了 :focus-within 之后，我们就可以和JavaScript说拜拜。我们可以这样来设置样式：

上面的示例展示了如何使用 :focus-within 来突出表格的整个行。如果在特定的表格行中有一个可获取焦点的可用元素，这里所指的是通过键盘获取焦点。比如上面这个示例，表格中有 <a> 元素，你懂的， a 元素是可以通过键盘获取焦点的。

这个时候你只需要在样式中添加：

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

2、下拉菜单

下拉菜单是我们最常的Web组件之一。当我第一次看到 :focus-within 这个伪类时，我想到的第一个使用场景就是下拉菜单。下拉菜单

上面的示例中，JavaScript是用来跟踪用户键盘焦点在一个导航下拉菜单中的。如果JavaScript检测到键盘焦点在一个链接上，那么给 .nav__list_drop 添加一个 .has-focus 类。当 li 有了 .has-focus 类时，他的子元素就会显示出来，也就是下拉菜单会显示出来。

这样的效果，我们可以直接通过 :focus-within 来取代JavaScript脚本的功能。使用 .nav__list__drop:focus-within 替代 .nav__list__drop.has-focus 。当你操作键盘，让下拉菜单项获得焦点时，就会显示下拉菜单。

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Off-screen Nav是在移动端上常见的一个效果。那么这个效果我们也可以通过 :focus-within 来实现。

总结

如果你熟悉 :focus 并不奇怪，但是你知道 :focus-within 的话，说明你在不断的关注CSS相关的新特性。当然这个属性再次刷新了CSS的世界真是奇怪。如果你感兴趣的话，不仿自己写写Demo。你会喜欢上这个属性的。

链接: https://fly63.com/article/detial/973