` 上应用 `focus-within` 选择器来为整个表单组添加样式，而不是在每个输入字段上单独应用 `:focus`。

下面是一个简单的例子，展示了如何使用 `focus-within` 伪类：

```css
/* 假设有一个包含多个输入字段的表单 */
.form-container {
border: 1px solid gray;
padding: 10px;
}

.form-container:focus-within {
border-color: blue;
}

/* 如果你想要在某个特定的输入字段获得焦点时改变样式，你可以这样写 */
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
border-color: blue;
}
```

在上面的例子中，当 `.form-container` 内的任何一个输入字段获得焦点时，`.form-container` 本身也会获得一个蓝色的边框。这有助于在用户交互时提供视觉反馈，并且可以在不使用 JavaScript 的情况下实现。

对于 Web 初学者来说，使用 `focus-within` 伪类的好处在于：

1. **简单性**：你可以在一个地方设置样式，而不是在每个可能获得焦点的元素上分别设置。
2. **响应性**：它提供了一种直观的方式来响应用户输入，这是任何 Web 应用程序的重要组成部分。
3. **可访问性**：它鼓励开发者关注表单的可访问性，因为焦点的样式是视觉反馈的一个重要方面。

使用 `focus-within` 伪类时，确保你的样式不会干扰表单的可访问性，例如，不要使用过于复杂的动画或颜色对比度过低的样式。