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

语法:
E:focus-within{sRules}/* 当 的某个后代获得焦点时,匹配 */div:focus-within {background: cyan;}
该选择器非常实用。举个通俗的例子:表单中的某个字段获得焦点时,整个表单的元素都可被高亮。
浏览器支持
| | | | |
| IE不支持:focus-within,其余浏览器都支持:focus-within |
例子
此例子中,当表单某个文本输入框获得焦点后,表单会被设置颜色样式。
选项1选项2选项3选项4选项5选项6//CSSoption:default {color: red;}
试试在这个表单中输入点什么。
Given Name: Family Name:form {border: 1px solid;color: gray;padding: 4px;}form:focus-within {background: #ff8;color: black;}input {margin: 4px;} Given Name:Family Name:.demo1 form{border: 1px solid; color: gray; padding: 4px;}.demo1 form:focus-within{background:#ff8; color: black;}.demo1 input{margin: 4px;}