css -> 和 ~ CSS 中的表达式

Question

CSS 中 ~ 和 > 的作用是什么？例如，以下表达式是什么意思？

:checked ~ label ~ .content > *

Answer 1

您的选择器意味着:

Select any element
that is a child of an element with the class content
which follows a label
which in turn follows a :checked input element.

>是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>

什么是选中的，什么不是:

1. 已选择
   这h3或 p元素直接位于 .content 内父元素。那.content元素后面至少有一个 label ，还有这个 label在至少一个输入元素 :checked 之后出现.

   请注意，这里的任何单选按钮都可以被选中，并且元素将匹配，因为如上所述~不需要标签立即跟随它。此外，给定结构，~ 中的任何一个选择器可以换成 + :

   :checked + label ~ .content > *
   :checked ~ label + .content > *
   

   但是这个选择器:

   :checked + label + .content > *
   

   只有在选中third 单选按钮时才会匹配，因为它是唯一一个立即 后跟label 的单选按钮。和 .content元素。

2. 未选中
   这em元素嵌套在 p 之一中本身包含在 .content 中的元素.基于插图 here , 它不会被选中，因为它不是 .content 的子项.

3. 未选中
   与 [1] 不同，label 中没有一个本节中的元素跟在任何 :checked 之后输入元素。因此这里什么都不选，因为不满足:checked ~ label .