请问这个CSS选择器里面~ * 是什么意思
看了一篇文章 关于实现纯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
条回答
写回答
写回答
-
码农|Coder| Pythonista你可以参考一下原文中给出的关于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元素被选中
2019-07-17 19:32:23赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
