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

Question

看了一篇文章 关于实现纯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

Answer 1

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