zoukankan      html  css  js  c++  java
  • 虚构 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

  • 相关阅读:
    jQuery Eazyui的学习和使用(一)
    PHP 红包功能代码
    PHPExcel 使用学习
    AngularJS 学习笔记
    sublime 快速生成html基础代码
    mysql 重置主键
    php 常用文件操作
    Android隐藏状态栏实现沉浸式体验
    MVC
    安卓Design包之NavigationView结合DrawerLayout,toolbar的使用,FloatingActionButton
  • 原文地址:https://www.cnblogs.com/foreverZ/p/css-parent-selector.html
Copyright © 2011-2022 走看看