CSS中的>和〜表达式

Question

CSS中〜和>的目的是什么？例如,以下表达式是什么意思？

:checked ~ label ~ .content > *

Answer 1

你的选择意味着:

选择任何元素
是与类元素的孩子content
,其遵循label
它遵循一个:checkedinput元素.

>是儿童组合子.它选择作为某个父元素的子元素的元素.与空间(后代组合子)不同,它只选择立即嵌套的元素.请参阅此答案以了解其工作原理.

~是一般的兄弟组合.它选择在同一父元素中的其他元素之后的元素(即兄弟元素).与+(相邻的兄弟组合子)不同,它不需要元素在同一父母中紧跟另一个元素.将下图比较另一个涵盖+组合子的答案.

要小心,因为~组合器不只是选择任何兄弟元素.它只选择在其兄弟之后出现的元素,因此: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. Selected
   此元素h3或p元素直接位于.content父元素内.该.content元素至少跟随一个元素label,这label发生在至少一个输入元素之后:checked.

   请注意,可以检查此处的任何单选按钮,并且元素将匹配,因为如上所述~,不需要标签立即跟随它.此外,给定结构,任何一个~选择器都可以换出+:

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

   但是这个选择器:

   :checked + label + .content > *
   

   如果将只匹配第三个单选按钮被选中,是因为它是唯一一个多数民众赞成立即后跟一个label和.content元素.

2. 未选中
   此em元素嵌套在其中包含的p元素之一中.content.根据这里的插图,它不会被选中,因为它不是一个孩子.content.

3. 未选择
   与[1]不同,label本节中的所有:checked元素都不遵循任何输入元素.因此,这里没有选择,因为它不满足:checked ~ label.

Answer 2

参看 http://www.w3.org/TR/selectors/:

E ~ F 一个F元素,前面是E元素,一个E元素
E > F 的F元素子元素