CSS 伪选择器 focus-within 介绍

CSS中的 :focus-within 伪选择器可有点“不寻常”，尽管它的名称看上去很简单，而且相当直观。但它的解释是：选择一个包含具有:focus 的任何子元素的元素。有点绕是不是，但仔细读应该也能理解，下面通过具体的例子你就更能理解了。

form:focus-within {
  background: lightyellow;
}

它是这样工作的：

<form action="#">
  <input type="text">
</form>

当form的子元素input获得焦点时，form 就会被选中。

我说“不寻常”是因为在CSS中，根据子元素的存在或状态来选择父元素并不常见，当然也是有用的。

看下面是一个例子：

<form action="#">
  <h2>这是一个表单</h2>
  <div>
    <label class="desc" id="title1" for="Field1">姓名</label>
    <div>
      <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
    </div>
  </div>
  <div>
    <label class="desc" id="title3" for="Field3">邮箱</label>
    <div>
      <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
   </div>
  </div>
  <div>
    <label class="desc" id="title4" for="Field4">内容</label>
    <div>
      <textarea id="Field4" name="Field4" spellcheck="true" rows="3" cols="50" tabindex="4"></textarea>
    </div>
  </div>
  <div>
    <fieldset>
      <legend id="title5" class="desc">请选择</legend>
      <div>
       <input id="radioDefault_5" name="Field5" type="hidden" value="">
       <div>
        <input id="Field5_0" name="Field5" type="radio" value="First Choice" tabindex="5" checked="checked">
        <label class="choice" for="Field5_0">First Choice</label>
       </div>
        <div>
         <input id="Field5_1" name="Field5" type="radio" value="Second Choice" tabindex="6">
         <label class="choice" for="Field5_1">Second Choice</label>
        </div>
      </div>
    </fieldset>
  </div>
  <div>
    <fieldset>
      <legend id="title6" class="desc">请选择</legend>
      <div>
      <div>
       <input id="Field6" name="Field6" type="checkbox" value="First Choice" tabindex="8">
       <label class="choice" for="Field6">First Choice</label>
      </div>
      <div>
       <input id="Field7" name="Field7" type="checkbox" value="Second Choice" tabindex="9">
       <label class="choice" for="Field7">Second Choice</label>
      </div>
    </fieldset>
  </div>
  <div>
    <label class="desc" id="title106" for="Field106">请选择</label>
    <div>
    <select id="Field106" name="Field106" class="field select medium" tabindex="11">
      <option value="First Choice">First Choice</option>
      <option value="Second Choice">Second Choice</option>
    </select>
    </div>
  </div>
</form>

form:focus-within {
  background: #f9f98b;
}
form header {
  padding: 2rem;
}
form header div {
  font-size: 90%;
  color: #999;
}
form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 0.5rem 2rem;
}
form > div:last-child {
  padding-bottom: 2rem;
}
form > div:focus-within {
  background: #a1c084;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
 width: 15%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 85%;
  float: right;
}
form > div > fieldset label {
 font-size: 90%;
}
fieldset {
 border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
 width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}

效果图：

注意上面的示例在整个表单和其内部的div上使用了:focus-within。子元素通过任意方式获得焦点都将触发:focus-within。例如，如果一个元素有tab-index属性或contenteditable属性时，那么它就是一个可聚焦的元素。元素如何成为焦点也不重要，它可以被点击或轻触，或通过其他方式导航，甚至通过JavaScript聚焦，比如：

document.querySelector("input").focus();

下面是:focus-within在各大浏览器上的支持情况：

可见截止目前大部门主流浏览器都已经支持了。