:focus-within

CSS 中的 :focus-within 伪类选择器有点不寻常，尽管名称合理且相当直观。如果元素包含任何具有 :focus 的子元素，它将选择该元素。

form:focus-within {
  background: lightyellow;
}

其工作原理如下……

<!-- this form will be selected -->
<form action="#">

  <!-- when this input is in focus -->
  <input type="text">

</form>

我说“不寻常”，因为在 CSS 中，根据子元素的存在或状态来选择父元素并不常见。尽管如此，它仍然非常有用！

这是一个可尝试的表单示例

请注意，该示例在整个表单上以及内部输入包装的 <div> 上使用 :focus-within。

子元素以任何方式获得焦点都会触发 :focus-within。例如，如果元素具有 tab-index 或 contenteditable 属性，那么它就是一个可聚焦元素，并且会起作用。它也不关心元素如何获得焦点。它可以被点击或轻触，也可以通过选项卡或其他方式导航到，甚至可以通过 JavaScript 获得焦点，例如…

document.querySelector("input").focus();

浏览器支持