我不理解~* css选择器组合
我不理解~* css选择器组合
提问于 2020-10-08 23:12:32
我正在尝试自己重构'Toggling elements with a hidden checkbox‘代码，但是我不理解选择器的语法：
#expand-toggle:checked ~ * .expandable {visibility: visible;}为什么我们同时需要~和*
为什么只使用~选择器是不够的？
谢谢
回答 1
Stack Overflow用户
发布于 2020-10-10 23:11:29
让我们回顾一下该示例的HTML：
<input type="checkbox" id="expand-toggle" />
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
</tbody>
</table>
<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>回想一下，~组合器是一个同级组合器。如果选择器要读取#expand-toggle:checked ~ .expandable，则要求.expandable元素紧跟在复选框之后，而不是在其他元素内。在本例中，.expandable是table中的tr。该table是checkbox的兄弟。
也许将*替换为table会使选择器更加清晰：
#expand-toggle:checked ~ table .expandable {
visibility: visible;
}两者都可以使用；我猜作者使用*是为了节省空间-显然，是以可读性为代价的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64265549
复制相关文章
相似问题
腾讯云开发者
