css3的focus-within选择器的使用

CSS3的focus-within选择器用于选取一个元素的所有后代元素中，只要其中一个获得焦点，该元素就会被选中。它的语法如下：

selector:focus-within {
  /* CSS样式 */
}

在使用该选择器时，首先需要有一个具有焦点行为的元素，例如<input>标签或<button>标签。然后，我们可以使用focus-within选择器来选取该元素的父元素，以便在该父元素上应用样式。

以下是focus-within选择器的使用示例：

示例一

假设我们有以下HTML结构，其中有一个具有焦点行为的输入框：

<div class="container">
  <h2>这是一个容器</h2>
  <form>
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名" />
    <label>密码：</label>
    <input type="password" name="password" placeholder="请输入密码" />
  </form>
</div>

我们希望在输入框获得焦点时，整个容器都显示出高亮效果。这时，我们可以使用focus-within选择器来为<div class="container">元素应用样式：

.container:focus-within {
  background-color: yellow;
}

当输入框获得焦点时，<div class="container">元素会出现黄色背景。

示例二

假设我们有以下HTML结构：

<div class="box">
  <h2>这是一个方框</h2>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</div>

我们希望当鼠标悬停在链接上时，整个方框都显示出高亮效果。这时，我们可以使用focus-within选择器结合鼠标悬停伪类:hover来为<div class="box">元素应用样式：

.box:focus-within,
.box:hover {
  background-color: yellow;
}

当鼠标悬停在链接上或者链接获得焦点时，<div class="box">元素会出现黄色背景。

以上就是focus-within选择器的使用攻略。需要注意的是，该选择器目前仅在现代浏览器中得到支持，若要兼容旧版浏览器，建议使用JavaScript来实现相应的交互效果。