第 114 期(W3C标准-CSS-伪类&伪元素)：focus-within 伪类 #117
Description
:focus-within 是一个CSS 伪类，表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代只要有被 focus，则该元素就会匹配这个伪类。这是一个非常有特色的伪类，因为它可以“回溯”父级。
示例：
当表单元素的任一后代元素（文本框、下拉框、复选框、a 链接）获得焦点时，整个表单的边框色和背景色发生变化
.ui-form {
padding: 20px;
border: 1px solid #ccc;
}
.ui-form:focus-within {
border-color: #06c;
background: rgba(180, 180, 255, .2)
}<form class="ui-form">
表单任意元素获得焦点时，匹配 :focus-within 伪类，表单背景色和边框色发生变化
<p>
<input type="text">
</p>
<p>
<select>
<option>第 1 项</option>
<option>第 2 项</option>
<option>第 3 项</option>
<option>第 4 项</option>
</select>
</p>
<p>
<label><input type="checkbox"> 复选框</label>
</p>
<a href="##">我是链接</a>
</form>