Question

在 CSS 中 ~ 和 & gt; 的目的是什么? 例如, 以下表达式意味着什么?

: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 组合器。它选择的是属于某个父元素的子元素。与空间(子系组合器)不同,它只选择立即取消的内容。见https://stackoverflow.com/a/322250905/106224"。它回答以说明它是如何运作的。

是 < a href=> http://www.w3. org/TR/ selectors/#general-sibling-combinators" rel=“ nofollown norefererr” > sibling combinator 。它选择了继同一父( 即兄弟姐妹) 内的其他元素之后的元素。不同于 (相邻的sibling combinators), 它并不要求在同一父( ) 中立即有一个元素跟随另一个元素。比较下面的插图“ https:// stackoverfrlow. com/ a/3382096/ 106224” >, 包括 < code{code> /codeccode > 的复选。



注意, 因为 < code_ / code> 组合器不只选择 < em> anny < / em > sibling 元素。 它只选择一个元素, 它在 < / strong > 其sibling 之后产生 < number >, 所以 < code > : checked ~ label  将无法匹配检查输入元素之前出现的 < code> 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>


选择什么, 选择什么, 不选择什么 :


Selected

This h3 or p element is located directly inside a .content parent element. That .content element follows at least one label, and this label occurs after at least one input element that is :checked.

请注意, 这里的无线电按钮 < em> 任何 < / em > 都可以检查, 元素会匹配, 因为如上所述 < code_ / code > 不需要标签立即跟随它。 此外, 根据此结构, 任何一个 < code_ / code > 选择器都可以被替换为 < code_ / code > :

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


但此选择器 :

:checked + label + .content > *


只有检查了 < 坚固> 第三个 < / 坚固 > 的无线电按钮, 才能匹配, 因为它是唯一具有 < 坚固 > 即时 < / 坚固 > 的按钮, 然后是 < code > label  和 < code>. content  元素。
Not selected

This em element is nested within one of the p elements which is itself contained within .content. Based on the illustration here, it won t be selected as it s not a child of .content.
Not selected

Unlike in [1], none of the label elements in this section follow any :checked input element. Therefore, nothing is selected here, because it doesn t satisfy :checked ~ label.

Answer 2

http://www.w3.org/TR/selectors/"rel="nreferrer" >http://www.w3.org/TR/selectors/ :

E ~ F an F element preceded by an E element
E > F an F element child of an E element

Answer 3

: checked 是无线电按钮或复选框的假类, < a href=> http:// reference. sitepoint.com/cs/pseudo class- checked> http:// reference. sitepoint.com/cs/pseudo class- checked http:// reference. sitepoint.com/cs/psedo class- checked

是普通sibling 选择器



 : checked ~ label  选择选中的复选框或收听按钮后产生的标签( 二者之间可能存在任意数量的元素, 但是它们在同一级别上, 而标签是在选中的复选框或收听按钮后) 。

:经检查的 ~ 标签 ~. content  选择一个元素,该元素含有分类内容,并附在上述标签之后(另外,它们之间可能存在任何多个元素)

是儿童选择器 http://www.w3.org/TR/CSS2/selector.html#child-selectors 

: 已检查 ~ 标签 ~. content> /code> 选择上述元素的任何子元素

Answer 4

* all elements
:checked input checked status
. class name
> under element

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

此页面将对您有用

友情链接