第 114 期(W3C标准-CSS-伪类&伪元素)：focus-within 伪类

[wingmeng]

:focus-within 是一个CSS 伪类，表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代只要有被 focus，则该元素就会匹配这个伪类。这是一个非常有特色的伪类，因为它可以“回溯”父级。

示例：

当表单元素的任一后代元素（文本框、下拉框、复选框、a 链接）获得焦点时，整个表单的边框色和背景色发生变化

.ui-form {
  padding: 20px;
  border: 1px solid #ccc;
}

.ui-form:focus-within {
  border-color: #06c;
  background: rgba(180, 180, 255, .2)
}

<form class="ui-form">
  表单任意元素获得焦点时，匹配 :focus-within 伪类，表单背景色和边框色发生变化
  <p>
    <input type="text">
  </p>
  <p>
    <select>
      <option>第 1 项</option>
      <option>第 2 项</option>
      <option>第 3 项</option>
      <option>第 4 项</option>
    </select>
  </p>
  <p>
    <label><input type="checkbox"> 复选框</label>
  </p>
  <a href="##">我是链接</a>
</form>