虚构 css 父级选择器

 能 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

 

转载于:https://www.cnblogs.com/foreverZ/p/css-parent-selector.html