能 CSS 解决的绝不用 JS，这句话又一次故作装逼地说出来还是挺爽的...
比如下拉列表，能用 CSS 的 :focus 就不用 JS 的 .on("focus blur")
能用 :hover 的就不用 .on("mouseover mouseout")
能用 :target 的就不用 .on("click")（:target 的撤回特别烦，此处只是为了押韵而已）
那么在实际情况中经常遇到那种：操作子级，父级变化 的情况
于是我也常常不禁去思考，CSS3 怎么就没有个 父级选择器呢...
后来发现其实还是有的，
$E > F，论坛上还多有流传，其实早就淘汰了
$input:focus > .container {}
!E > F，昙花一现
!input:focus > .container {}
:has() 伪类，推迟到 CSS5 了...CSS5？！。没错，孩子，这就是人生
.container:has(> input:focus) {}
然后这就很尴尬了呀，这篇文章该如何继续下去呢，好吧，又开始兵行险招了...
其实吧，眼见不一定为实哟...
其实说穿了一点都不好玩了，大致贴一下代码好了。
input:focus + label {box-shadow: 0 0 5px blue;}
label {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}
看上去是父子级，其实还是同胞级啦，所以才叫虚构咯...The end