> und ~ Ausdrücke in CSS

Question

Was ist der Zweck von ~ und > in CSS? Zum Beispiel, was bedeutet der folgende Ausdruck?

:checked ~ label ~ .content > *

Answer 1

Ihr Selektor bedeutet:

Wählen Sie jedes Element aus,
das ein Kind eines Elements mit der Klasse content ist,
das einem label folgt,
das wiederum einem :checked Eingabeelement folgt.

> ist der Kinde-Combinator. Er wählt Elemente aus, die Kinder eines bestimmten Elternelements sind. Im Gegensatz zu Leerzeichen (dem Nachfahren-Combinator) wählt er nur unmittelbar verschachtelte Elemente aus. Sehen Sie sich diese Antwort für eine Illustration an, wie er funktioniert.

~ ist der allgemeine Geschwister-Combinator. Er wählt Elemente aus, die anderen Elementen im selben Elternelement folgen (d.h. Geschwister sind). Im Gegensatz zu + (dem benachbarten Geschwister-Combinator) erfordert er nicht, dass ein Element unmittelbar einem anderen im selben Elternelement folgt. Vergleichen Sie die unten stehende Illustration mit dieser anderen Antwort, die den + Combinator behandelt.

Seien Sie vorsichtig, da der ~ Combinator nicht einfach irgendein Geschwisterelement auswählt. Er wählt nur ein Element aus, das nach seinem Geschwisterelement kommt, also wird :checked ~ label nicht mit einem label übereinstimmen, das vor dem überprüften Eingabeelement erscheint.

Eine Illustration:

    1

    2

    3

        Unterüberschrift 1     
        Einige Texte              
           mit Betonung 

        Einige Texte          

    1

    2

    3

        Unterüberschrift 1     
        Einige Texte              
           mit Betonung 

        Einige Texte          

Was ausgewählt ist und was nicht:

1. Ausgewählt
   Dieses h3 oder p Element befindet sich direkt innerhalb eines Elternelements .content. Dieses .content Element folgt mindestens einem label, und dieses label kommt nach mindestens einem Eingabeelement, das :checked ist.

   Beachten Sie, dass irgendeiner der Optionsfelder hier ausgewählt werden kann, und die Elemente werden übereinstimmen, da wie oben erwähnt ~ nicht erfordert, dass unmittelbar ein Label folgt. Außerdem können angesichts der Struktur entweder eine der ~ Selektoren durch ein + ersetzt werden:

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

   Aber dieser Selektor:

   :checked + label + .content > *

   Wird nur übereinstimmen, wenn das dritte Optionsfeld ausgewählt ist, da es das einzige ist, das unmittelbar von einem label und dem .content Element gefolgt wird.

2. Nicht ausgewählt
   Dieses em Element ist in einem der p Elemente verschachtelt, die sich selbst innerhalb von .content befinden. Basierend auf der Illustration hier wird es nicht ausgewählt, da es kein Kind von .content ist.

3. Nicht ausgewählt
   Im Gegensatz zu [1] folgen keines der label Elemente in diesem Abschnitt einem :checked Eingabeelement. Daher wird hier nichts ausgewählt, da es nicht :checked ~ label erfüllt.

Answer 2

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

E ~ F ein F-Element, das von einem E-Element zuvor kommt
E > F ein F-Element, das ein Kind eines E-Elements ist

Answer 3

:checked ist eine Pseudo-Klasse für Radio-Buttons oder Kontrollkästchen http://reference.sitepoint.com/css/pseudoclass-checked

~ ist der allgemeine Geschwister-Selektor

:checked ~ label wählt das Label aus, das nach einem ausgewählten Kontrollkästchen oder Radio-Button kommt (zwischen den beiden können beliebig viele Elemente sein, sie befinden sich jedoch auf der gleichen Ebene und das Label kommt nach dem ausgewählten Kontrollkästchen oder Radio-Button)

:checked ~ label ~ .content wählt ein Element aus, das die Klasse "content" hat und nach dem oben beschriebenen Label kommt (auch hier können beliebig viele Elemente dazwischen sein)

> ist der Kind-Selektor http://www.w3.org/TR/CSS2/selector.html#child-selectors

:checked ~ label ~ .content > * wählt jedes Kind-Element des oben beschriebenen Elements aus

Answer 4

* alle Elemente
:checked Eingabe überprüfter Status
. Klassenname
> unter Element

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

Diese Seite wird für Sie nützlich sein