> и ~ выражения в CSS

Question

Какова цель ~ и> в CSS? Например, что означает следующее выражение?

:checked ~ label ~ .content > * 

Answer 1

Ваш селектор означает:

Выберите элемент
, который является потомком элемента с классом content
, который следует за label
, который в свою очередь следует :checked входной элемент а.

> является child combinator. Он выбирает элементы, которые являются дочерними элементами определенного родительского элемента. В отличие от пространства (комбинатор потомков) он выбирает только сразу вложенные элементы. См. this answer для иллюстрации того, как это работает.

~ является general sibling combinator. Он выбирает элементы, которые следуют за другими элементами внутри одного и того же родителя (т. Е. Являются братьями и сестрами). В отличие от + (соседний комбинатор), он не требует, чтобы элемент немедленно следил за другим в одном и том же родителе. Сравните приведенный ниже рисунок с номером this other answer, который содержит комбинатор +.

Будьте осторожны, так как комбинатор ~ не просто выбирает любой родственный элемент. Он выбирает только элемент, который приходит после его родного брата, поэтому :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. На основании иллюстрации here он не будет выбран, так как он не является дочерним по отношению к .content.

3. Не выбран
   В отличии от [1], ни один из элементов label в этом разделе, не следует какому-либо :checked входного элемента. Поэтому здесь ничего не выбрано, потому что оно не удовлетворяет :checked ~ label.

Answer 2

Cf. http://www.w3.org/TR/selectors/:

E ~ F элемент F предшествует элементу E
E > F элемент ребенка F элемента E

Answer 3

* все элементы
:checked вход удостоверяются
. имя класса
> под элементом

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

Эта страница будет полезна для вас

Answer 4

:checked является псевдо-класс для переключателей или флажков http://reference.sitepoint.com/css/pseudoclass-checked

~ является общим селектор Sibling

:checked ~ label выбирает метку, которая приходит после того, как выбранный флажок или переключатель (между ними может быть любое количество элементов, но они находятся на одном уровне, и метка появляется после выбранного Флажок или переключатель)

:checked ~ label ~ .content выбирает элемент, который имел содержание класса и приходит после метки, описанной выше (опять-таки, может быть любое число элементов между ними)

> представляет собой селектор дочерних http://www.w3.org/TR/CSS2/selector.html#child-selectors

:checked ~ label ~ .content > * выбирает любой потомок элемента, описанного выше