Question

〜和＆gt;的目的是什么？在CSS？例如，下面的表达式是什么意思？

:checked ~ label ~ .content > *

Answer 1

您的选择器意味着：

选择任何元素
这是具有类content的元素的子元素在label之后它依次跟随:checked输入元素。

>是child combinator。它选择作为某个父元素的子元素的元素。与空间（后代组合子）不同，它只选择立即嵌套的元素。有关其工作原理的说明，请参阅this answer。

~是general sibling combinator。它选择在同一父元素中的其他元素之后的元素（即兄弟元素）。与+（相邻的兄弟组合子）不同，它不需要元素在同一父代中紧跟另一个元素。将下图比较为涵盖+组合子的this other answer。

要小心，因为~组合子不只是选择任何兄弟元素。它只选择其兄弟之后的元素，因此:checked ~ label将与检查的输入元素之前出现的label不匹配。

插图：

<section>
    <input type="radio" name="example1" value="1" checked>
    <label>1</label>
    <input type="radio" name="example1" value="2">
    <label>2</label>
    <input type="radio" name="example1" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [1] Selected -->
        <p>Some text              <!-- [1] Selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [1] Selected -->
    </div>
</section>

<section>
    <input type="radio" name="example2" value="1">
    <label>1</label>
    <input type="radio" name="example2" value="2">
    <label>2</label>
    <input type="radio" name="example2" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [3] Not selected -->
        <p>Some text              <!-- [3] Not selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [3] Not selected -->
    </div>
</section>

选择了什么，什么不是：

<强>选择的
此h3或p元素直接位于.content父元素内。该.content元素至少跟有一个label，并且此label出现在至少一个:checked的输入元素之后。

请注意，可以检查此处任何单选按钮，并且元素将匹配，因为如上所述~不需要标签立即跟随它。此外，根据结构，~选择器中的任何一个都可以替换为+：
```
:checked + label ~ .content > *
:checked ~ label + .content > *
```
但是这个选择器：
```
:checked + label + .content > *
```
仅在选中第三个单选按钮时匹配，因为它是唯一一个立即后跟label和.content的按钮元件。
未选中
此em元素嵌套在p元素之一中，.content元素本身包含在.content中。根据插图here，它不会被选中，因为它不是label的孩子。
未选中
与[1]不同，本节中的:checked元素都不跟随任何:checked ~ label输入元素。因此，此处未选择任何内容，因为它不满足{{1}}。