>和〜在CSS表达式(> and ~ expressions in CSS)

什么是目的〜和>在CSS？ 例如什么下面的表达式是什么意思？

:checked ~ label ~ .content > *

Answer 1:

您的选择是指：

选择任何元素
这是一个元素与类的子content
随后一个label
这反过来又遵循:checked输入元件。

>是子组合子 。 它选择具有某个父元素的子元素。 不同于空间（后代组合子），它仅选择立即嵌套元素。 见这个答案对于它如何工作的说明。

~是一般的兄弟组合子 。 它选择相同的父内的其它元件（即是兄弟姐妹）之后跟随的元件。 不同于+ （相邻兄弟组合子），它不要求一个元件到紧跟在另一相同的父。 下面比较的插图本等答案覆盖+组合子。

要小心，因为~组合子不只是选择任何同级元素。 它只会选择来自其兄弟之后 ，因此一个元素: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 > * 

   如果第三个单选按钮被选中将只匹配，因为它是唯一一个会立即后跟一个label和.content元素。

2. 未选中的
   这个em元件嵌套在之一内p其本身包含内的元件.content 。 根据图示在这里 ，它不会被选择，因为它不是一个孩子.content 。

3. 未选中的
   与在[1]中，没有一个的label在本节元件按照任何:checked输入元件。 因此，没有在此选择，因为它不符合:checked ~ label 。

Answer 2:

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

E ~ F通过的E元素之前的F元素
E > F的E元素的F元素孩子

Answer 3:

:checked是单选按钮或复选框的伪类http://reference.sitepoint.com/css/pseudoclass-checked

~是一般兄弟选择

:checked ~ label选择一个选定的复选框或单选按钮后到来的标签（可以有任何数量的两个之间的元素，但它们是在同一水平上，并且标签来选择的复选框或单选按钮）之后

:checked ~ label ~ .content选择哪个有类内容与上述的标签之后谈到的元件（再次，可以存在任何数量的它们之间的元素）

>为孩子选择http://www.w3.org/TR/CSS2/selector.html#child-selectors

:checked ~ label ~ .content > *选择上述元素的任何子

Answer 4:

*所有元素
:checked输入检查状态
. 班级名称
>下元件

http://w3schools.com/cssref/css_selectors.asp

这个页面将是对您有用

文章来源: > and ~ expressions in CSS