敲好用的伪类选择器 :focus-within

伪类选择器focus-within，它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。
代码示例：

//html
 
 Enter text 
  

//css
.container:focus-within { 
 background-color: #aaa; 
}

下面是演示动画：

它或它的后代获得焦点，这一点使得让感知获焦区域变得更大，所以，最常规的用法就是使用 :focus-within 感应用户操作聚焦区域，高亮提醒。