CSS :focus-within

使用＜code＞：hover＜/code＞来显示附加信息或元素是一种非常有用的技术，但使用hover伪类的一个大缺点是它们通常对可访问性不友好。并不是每个人都使用鼠标，有些用户有视觉障碍，所以他们依赖屏幕阅读器或键盘——这两种功能在技术上不会悬停。

幸运的是，CSS规范给了我们一份礼物，可以与配对：悬停：：在内聚焦。使用：当元素或其子元素具有键盘焦点时，内的焦点开发人员可以修改元素的样式！

考虑以下具有默认CSS样式的HTML模板：

<ul id="sports">
  <p>
    <label>
      <input type="checkbox" name="sports[]">
      Soccer
      <button class="remove">Remove</button>
    </label>
    <!-- ... -->
  </p>
</ul>

#sports .remove {
  display: none;
}

#sports p:hover .remove {
  display: inpne-block;
}

对于上面的代码，将鼠标悬停在列表项上会显示“删除”按钮。这对鼠标用户来说很好，但对键盘用户来说毫无用处。让我们在中使用：焦点来解决这个问题：

#sports .remove {
  display: none;
}

#sports p:hover .remove,
#sports p:focus-within .remove {
  display: inpne-block;
}

一旦焦点点击复选框，从技术上讲，焦点就在列表项中，因此我们可以在中使用：焦点来显示“删除”按钮。

可访问性是最后考虑的事情，但不应该是事后考虑；在某种程度上，中的:focus是一个有用的盟友，即使可访问性是事后才想到的。即使在预先考虑可访问性时，:中的焦点也应该放在每个开发人员的工具箱中！