我不明白~* css选择器组合

Question

我正试图自己重建"Toggling elements with a hidden checkbox"代码，但我不理解选择器语法：

#expand-toggle:checked ~ * .expandable {visibility: visible;}

为什么我们需要~和*？

为什么仅仅使用~选择器是不够的？

谢谢

Answer 1

让我们查看该示例的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是复选框的同级。

也许把*换成table会让选择器更清晰：

#expand-toggle:checked ~ table .expandable {
visibility: visible;
}

任何一种都可以使用；我猜作者选择*是为了节省空间——显然是以可读性为代价的。