:focus-within

版本：css3

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

语法:

/* 当 
 的某个后代获得焦点时，匹配 
 */
div:focus-within {
  background: cyan;
}
该选择器非常实用。举个通俗的例子：表单中的某个字段获得焦点时，整个表单的元素都可被高亮。
浏览器支持
IE不支持:focus-within，其余浏览器都支持:focus-within
例子
此例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。
 选项1
    选项2
    选项3
    选项4
    选项5
    选项6



//CSS

option: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;}
 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com