介绍

长期以来，仅使用 CSS 无法选择父元素，但是伪类:focus-within稍微改变了这个故事。它允许在元素具有焦点时对其进行样式设置，而且在其任何内部元素（后代）具有焦点时也可以进行样式设置。一个主要的例子是一个表单，当用户关注输入元素之一时，您希望容器元素以某种方式设置样式。

HTML 和 CSS 代码

这是在表单中使用:focus-within的示例。让我们从这个标记开始：

<form tabindex="0" class="myForm">
  <h3>What's your favorite color?</h3>
  <input type="text">
</form>

我们的 CSS 规则如下：

.myForm:focus-within {
  background: #f8f8f8
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 0.5) 70px
    );
}
.myForm:focus-within::before {
  content: "I'm a happy selected form!";
  color: rgb(239, 187, 53);
}

工作演示

如果您使用支持的浏览器，您可以在下面看到结果。请注意，当表单本身被聚焦或任一输入被聚焦时，不同的背景是如何应用于包含表单元素的。

如果我们使用旧的:focus伪类而不是:focus-within，我们的容器表单将仅在焦点位于表单本身时设置样式，而不是在输入焦点时：

感谢Lea Verou提供的 CSS 背景图案。

结论

为了使:focus-within按预期工作，您必须确保容器的内部元素是可聚焦的。默认情况下，输入元素是可聚焦的，但div、img或p元素则不是。所述的tabindex属性可以被用来使一个元件可获得焦点。容器元素也应该是可聚焦的，以便在仅从容器聚焦时接收样式。

浏览器兼容性检查：截至 2020 年，所有现代浏览器都支持focus-within，但请检查Can I Use以获取详细的、特定于版本的浏览器支持。