By

文章目录

: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:

文章目录