CSS:focus-within伪类

介绍

长期以来，仅使用 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 以获得详细的、特定于版本的浏览器支持。