3

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

:checked ~ label ~ .content > *
4

4 回答 4

16

您的选择器意味着：

选择任何元素
的子元素，该元素的类在content
alabel
之后，而后者又在:checked输入元素之后。

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

~是一般的兄弟组合子。它选择在同一父级中的其他元素之后的元素（即兄弟姐妹）。与+（相邻的兄弟组合器）不同，它不需要一个元素立即跟随同一个父元素中的另一个元素。将下图与涵盖组合器的其他答案进行比较。+

小心，因为~组合器不只是选择任何兄弟元素。它只选择一个出现在其兄弟元素之后的元素，因此:checked ~ label不会匹配label出现在被检查输入元素之前的 a 。

插图：

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

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

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

    但是这个选择器：

    :checked + label + .content > *

    仅当检查第三个广播按钮时，才会匹配，因为它是唯一立即遵循Alabel和.content元素的按钮。

  2. 未选择
    此em元素嵌套在其中一个元素中，该p元素本身包含在 中.content。根据此处的插图，它不会被选中，因为它不是 的子级.content。

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

于 2012-05-24T12:02:41.510 回答
6

参照。http://www.w3.org/TR/selectors/：

E ~ F E 元素前面的 F 元素 E 元素
E > F 的 F 元素子元素

于 2012-05-24T12:03:49.347 回答
2

: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 > *选择上述元素的任何子元素

于 2012-05-24T12:12:46.260 回答
1

*所有元素在元素下
:checked输入检查状态
.类名
>

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

此页面将对您有用

于 2012-05-24T12:04:34.837 回答