文章目录

:focus-within伪类能够在当前元素或其后代任何元素在focus状态时应用相应的规则。语言上比较难理解,可以直接看下面的例子:
CSS:

1
2
3
4
5
6
7
8
9
10
11
.name-container {
padding: 4px;
}
.name-container:focus-within {
background: yellow;
}
input {
margin: 4px;
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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:

文章目录