:focus-within

版本：css3

:focus-within是一个CSS 伪类，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。（shadow DOM 树中的后代也包括在内）

语法:

E:focus-within{sRules}

/* 当 <div> 的某个后代获得焦点时，匹配 <div> */
div:focus-within {
  background: cyan;
}

该选择器非常实用。举个通俗的例子：表单中的某个<input>字段获得焦点时，整个表单的<form>元素都可被高亮。

浏览器支持

IE不支持:focus-within，其余浏览器都支持:focus-within

例子

此例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。

<select multiple>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option selected>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
</select>


//CSS

option:default {
    color: red;
}

试试在这个表单中输入点什么。

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>
<style>
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
</style>