CSS :focus-within 选择器介绍

简介

CSS :focus-within 选择器是一个用于选择包含有焦点元素的父元素的伪类选择器。

当一个父元素包含有一个子元素被用户操作而获取焦点时，:focus-within 选择器就会匹配该父元素。

语法

selector:focus-within {
  /* CSS 属性 */
}

• selector: 要选择的父元素的选择器。
• :focus-within: 伪类选择器，表示父元素包含有焦点元素。

示例

假设有以下 HTML 结构：

<div class="parent">
  <input type="text" class="child" />
</div>

要在父元素 .parent 获取焦点时改变背景颜色，可以使用 :focus-within 选择器：

.parent:focus-within {
  background-color: lightblue;
}

当用户在输入框 .child 中输入文字并获取焦点时，父元素 .parent 的背景颜色将变为浅蓝色。

注意事项

• :focus-within 选择器适用于支持该伪类选择器的现代浏览器。
• 如果想要处理不支持 :focus-within 选择器的旧浏览器，可以考虑使用 JavaScript 来实现相同的效果。
• :focus-within 选择器只能选择直接包含有焦点元素的父元素，而不能选择祖先元素。

参考链接

• MDN web docs

以上是对 CSS :focus-within 选择器的简要介绍和示例。通过使用这个选择器，你可以更具体地控制页面中包含有焦点元素的父元素的样式。