CSS 伪类选择器focus-within的用法

focus-within 是一个 CSS 伪类选择器，它匹配包含某个元素的父元素，当该元素或其任何子元素获得焦点时，该选择器将生效。与 :focus 伪类选择器不同，:focus-within 选择器是基于父元素的状态而不是基于子元素的状态。

例如，以下代码片段中，当用户点击 input 元素时，它的父元素 div 元素会改变背景颜色：

<div class="container">
  <input type="text" placeholder="Enter text">
</div>

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

当 input 元素获得焦点时，div 元素的背景颜色将变为 lightblue。

需要注意的是，:focus-within 伪类选择器的浏览器支持性不如其他选择器，例如 :hover 和 :active。