敲好用的伪类选择器-focuswithin

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

这也就意味着，它或它的后辈取得焦点，都能够触发 :focus-within。
代码示例：

//html<div class="container" tabindex="0">  <label for="text">Enter text</label>  <input id="text" type="text" /> </div>

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

上面是演示动画：

包裹input元素的父元素，在Input被抉择时，款式也产生了扭转：

它或它的后辈取得焦点，这一点使得让感知获焦区域变得更大，所以，最惯例的用法就是应用 :focus-within 感应用户操作聚焦区域，高亮揭示。