举例说明伪类:focus-within的用法

:focus-within 是一个 CSS 伪类，用于选择其内部具有焦点的元素，或者其自身具有焦点的元素。这意味着，如果一个元素或其任何子元素当前处于焦点状态，那么这个元素就会被选中。这在处理表单、模态框、下拉菜单等交互元素时特别有用，可以帮助改善用户的焦点体验。

以下是一个简单的 :focus-within 用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus-within 示例</title>
<style>
  .form-group {
    border: 1px solid transparent;
    padding: 10px;
    transition: border-color 0.3s;
  }

  .form-group:focus-within {
    border-color: blue; /* 当 .form-group 或其内部的任何元素获得焦点时，边框颜色变为蓝色 */
  }
</style>
</head>
<body>

<div class="form-group">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
</div>

<div class="form-group">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
</div>

</body>
</html>

在这个示例中，我们定义了一个 .form-group 类，用于包装表单的输入字段和标签。我们使用 :focus-within 伪类来指定，当 .form-group 或其内部的任何元素（如 <input>）获得焦点时，.form-group 的边框颜色应变为蓝色。这提供了一种视觉反馈，帮助用户更好地理解当前哪个表单组处于活动状态。