` 都会变成浅黄色。

2. **导航菜单的高亮**：
在导航菜单中，你可以使用 `focus-within` 来高亮当前激活的菜单项。例如：

```css
ul.nav li {
color: black;
}

ul.nav li:focus-within {
color: red;
}
```

这样，当用户点击某个菜单项时，该菜单项的文本颜色会变成红色。

3. **按钮状态的变化**：
对于按钮，你可以使用 `focus-within` 来改变按钮的外观，以指示它已经获得了焦点。例如：

```css
button {
background-color: white;
border: 1px solid black;
}

button:focus-within {
background-color: #ffffcc;
border: 1px solid red;
}
```

这样，当用户点击按钮时，按钮的背景颜色会变成浅黄色，边框会变成红色。

4. **输入框的错误提示**：
如果你有一个输入框，并且你想要在用户输入错误时给予反馈，你可以使用 `focus-within` 来显示错误信息。例如：

```css
input.error {
border: 1px solid red;
}

input.error:focus-within {
border: 1px solid red;
box-shadow: 0 0 5px red;
}
```

这样，当输入框获得焦点并且有错误时，它会有一个红色的边框和阴影。

5. **键盘导航的指示**：
在无障碍设计中，你可以使用 `focus-within` 来指示当前通过键盘导航到的元素。例如：

```css
*:focus-within {
outline: 2px solid blue;
outline-offset: 2px;
}
```

这样，任何获得焦点的元素都会有一个蓝色的轮廓，以便用户知道他们当前在页面的哪个位置。

使用 `focus-within` 时，请确保考虑到无障碍需求，并为所有用户提供良好的体验。此外，由于 `focus-within` 是一个相对较新的属性，它可能不是所有浏览器都完全支持的，因此在项目中使用时，请确保进行浏览器兼容性测试。