请问这个CSS选择器里面~ * 是什么意思 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

请问这个CSS选择器里面~ * 是什么意思

杨冬芳 2016-06-08 17:17:47 1735

看了一篇文章 关于实现纯CSS实现内容过滤

其中不太理解

input[type="radio"]{
  &[id="men"]:checked {
    * label {
      background:#6666ff;
    }
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }

  &[id="women"]:checked {
    * label {
      background:#ff4466;
    }
    ~ .men,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }

想请问里面的~ 还有 * 是什么意思 ?

非常感谢

原文地址
http://www.w3cplus.com/css3/pure-css-content-filter.html

前端开发
分享到
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:32:23

    你可以参考一下原文中给出的关于css3通用兄弟元素选择器的文章 http://www.w3cplus.com/css3/basic-selectors
    通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。

    回到原文内容中的html代码结构

    <div class="container">
        <!-- 必须保证input和label匹配 -->
        <input type="radio" id="men" name="clothing " />
        <label for="men">男装</label>
        <input type="radio" id="women" name="clothing "/>
        <label for="women">女装</label>
        <input type="radio" id="children" name="clothing "/>
        <label for="children">童装</label>
        <input type="radio" id="reset" name="clothing "/>
        <label for="reset">重置</label>
        <!-- 要被过滤的内容元素需要与input元素是兄弟元素 -->
        <div class="tile men">
            <img src="" alt="">
        </div>
        <div class="tile women">
            <img src="" alt="">
        </div>
        <div class="tile children">
            <img src="" alt="">
        </div>
        <!-- 此处省略N个.men、.women和.children元素 -->
    </div>

    再结合其css代码

    ~ .women,
    ~ .children

    意思就是选择选中.container类下与men类同级的women和children类,*表示所有的label元素被选中

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程