应用 CSS :focus-within
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
为了每周学习新知识，我偶然发现了一个并不算新的伪类元素：:focus-within。让我们来看看它是如何工作的，以及如何将其应用到我们的样式中。
伪:focus-within类表示与伪类配对的元素:focus，或者具有与伪类匹配的后代的元素:focus。
注意：这里的焦点是指当您点击、轻触或使用 Tab 键在表单输入或链接等元素之间切换时。
我喜欢克里斯·科伊尔用简单易懂的方式解释这个问题：
如果某个元素包含任何具有以下条件的子元素，则选择该元素
:focus：
这与什么不同:focus？
伪:focus元素的工作方式有所不同。当伪元素被应用到某个元素时，该元素会获得焦点:focus。但是，在处理多个子元素时，通常不会使用:focus伪类来选择父元素。:focus伪类只会应用于当前获得焦点的元素本身。
这就是它:focus-within能够解决的问题。:focus-within如果我们想要选择一个包含焦点元素或具有匹配后代元素的元素，我们可以使用伪类:focus。让我们看看如何实现这一点。
应用 :focus-within
:focus-within它适用于多种使用场景。您可以考虑以下几种用法：
- 当表单的某个输入字段处于焦点状态时，高亮显示整个表单。
- 高亮显示表格中的行，并在用户点击时更改背景颜色。
<form>以下是一个示例，当用户聚焦于容器的某个字段时，如何突出显示整个容器<input>。
浏览器支持
截至 2020 年，此 CSS 特性已被广泛支持，只有 IE 浏览器尚不支持。以下是当前完全支持该特性的浏览器列表:focus-within。
最后想说的话
这个:focus-within元素对于开发者和网络用户来说都是一项无障碍功能上的胜利。我们在编写代码时应该始终牢记这一点：使用它远比使用 JavaScript 来完成相同的任务要好得多。
资源
CSS Focus Within 规范
MDN 文档
CSS 技巧 :focus-within