>和〜表达式 [英] > and ~ expressions in CSS

问题描述

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

 ：checked〜label〜.content> * 
  

解决方案

您的选择器意味着：

选择任何元素

，它是一个具有 content

后面紧跟标签

，后面紧跟：checked 输入元素。

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

〜是一般兄弟姐妹组合器。它选择在同一父（即兄弟）内的其他元素之后的元素。与 + （相邻的兄弟组合器）不同，它不需要在同一父节点中紧跟另一个元素。将下面的示例与此其他答案进行比较，其中涵盖了 + 组合器

注意，〜组合器不只是选择任何 sibling元素。它只选择之后出现的元素，因此：checked〜label 将不匹配标签



例如：

 < section> 
< input type =radioname =example1value =1checked> 
< label> 1< / label> 
< input type =radioname =example1value =2> 
< label> 2< / label> 
< input type =radioname =example1value =3> 
< label> 3< / label> 
 
< div class =content> 
< h3>副标题1< / h3> <！ -  [1]已选择 - > 
< p>一些文本<！ -  [1]选中 - > 
< em>（带强调）< / em> <！ -  [2]未选择 - > 
< / p> 
< p>一些文字< / p> <！ -  [1]已选择 - > 
< / div> 
< / section> 
 
< Section> 
< input type =radioname =example2value =1> 
< label> 1< / label> 
< input type =radioname =example2value =2> 
< label> 2< / label> 
< input type =radioname =example2value =3> 
< label> 3< / label> 
 
< div class =content> 
< h3>副标题1< / h3> <！ -  [3]未选择 - > 
< p>一些文本<！ -  [3]未选择 - > 
< em>（带强调）< / em> <！ -  [2]未选择 - > 
< / p> 
< p>一些文字< / p> <！ -  [3]未选择 - > 
< / div> 
< / section> 
  

选择什么和不适用：

1. 已选择
   
   此 h3 或 p 元素直接位于 .content 父元素内部。 .content 元素跟随至少一个标签，此标签发生在：checked 的至少一个输入元素之后。

   
   
   

   em>这里的单选按钮可以被检查，并且元素将匹配，因为如上所述〜不需要标签跟随它。此外，给定结构，〜选择器之一可以换出 + ：

    ：checked + label〜.content> * 
   ：checked〜label + .content> * 
     

   但这个选择器：

    ：checked + label + .content> * 
     

   只有在选中第三个单选按钮时才会匹配只有立即后跟标签和 .content 元素。 p>




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




3. 未选择
   
   与[1]本节中的标签跟随任何：checked 输入元素。因此，这里没有选择，因为它不满足：checked〜label 。




What is the purpose of ~ and > in CSS? For example what does the following expression mean?

:checked ~ label ~ .content > *

解决方案

Your selector means:

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.

> is the child combinator. It selects elements that are children of a certain parent element. Unlike the space (the descendant combinator), it only selects immediately-nested elements. See this answer for an illustration on how it works.

~ is the general sibling combinator. It selects elements that follow after other elements within the same parent (i.e. are siblings). Unlike + (the adjacent sibling combinator), it doesn't require an element to immediately follow another in the same parent. Compare the illustration below to this other answer which covers the + combinator.

Be careful, as the ~ combinator does not just select any sibling element. It only selects an element that comes after its sibling, so :checked ~ label will not match a label that occurs before the checked input element.

An illustration:

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

What's selected and what's not:

1. 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.

   Note that any of the radio buttons here can be checked, and the elements will match, because as mention above ~ doesn't require a label to follow it immediately. Also, given the structure, either one of the ~ selectors can be swapped out for a +:

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

   But this selector:

   :checked + label + .content > *
   

   Will only match if the third radio button is checked, because it's the only one that's immediately followed by a label and the .content element.

2. 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.

3. 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.

这篇关于>和〜表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！