共计 375 个字符,预计需要花费 1 分钟才能阅读完成。
伪类选择器 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
感应用户操作聚焦区域,高亮揭示。
正文完