`）来指示它现在处于活动状态。您可以使用 `focus-within` 来实现这一点：

```css
div:focus-within {
border: 2px solid blue;
box-shadow: 0 0 5px blue;
}
```

2. **导航菜单的展开和收起**
在导航菜单中，当用户点击某个菜单项时，您可能想要展开子菜单。使用 `focus-within`，您可以编写这样的样式：

```css
ul li:focus-within {
background-color: #ddd;
border-radius: 5px;
}
```

3. **输入框的错误提示**
如果用户在输入框中输入了无效的数据，您可能想要在输入框周围显示一个错误提示框。使用 `focus-within`，您可以编写这样的样式：

```css
input:focus-within {
border: 2px solid red;
}
```

4. **按钮的悬停效果**
当用户将鼠标悬停在按钮上时，您可能想要改变按钮的样式。使用 `focus-within`，您可以编写这样的样式：

```css
button:focus-within {
background-color: blue;
color: white;
}
```

请注意，`focus-within` 不适用于所有的元素，它主要在支持它的现代浏览器中工作。在较老的浏览器中，您可能需要使用 JavaScript 来实现类似的功能。此外，使用 `focus-within` 时要小心，因为它可能会导致性能问题，尤其是在大型和复杂的布局中。

在实际项目中使用 `focus-within` 时，确保考虑到可访问性，并且不要过度使用它，以免影响用户体验。