css之focus-within
文章目录
:focus-within
伪类能够在当前元素或其后代任何元素在focus
状态时应用相应的规则。语言上比较难理解,可以直接看下面的例子:
CSS:1234567891011.name-container { padding: 4px;}.name-container:focus-within { background: yellow;}input { margin: 4px;}
HTML:12345678910111213<p>The div below will have a yellow background if either input inside is focused.</p><div class="name-container"> <label for="given_name"> Given Name: <input id="given_name" type="text"> </label> <label for="family_name"> Family Name: <input id="family_name" type="text"> </label></div>
渲染结果:
应用条件:
当前元素或后代任何元素具备focus
能力都能触发这个伪类规则,且触发形式不限,可以是通过点击、tab甚至是通过js来让某个元素focus
。
应用场景:
编辑表单时,让整个表单应用某些样式规则
CanIUse: