Was bedeutet> in CSS bedeuten?

StackOverflow https://stackoverflow.com/questions/1628485

  •  06-07-2019
  •  | 
  •  

Frage

In der IUI CSS-Datei, die sie verwenden die folgenden Selektoren: 

body > *:not(.toolbar)
body > *[selected="true"]

Was bedeutet die>, *: nicht () und * [] bedeutet

Danke.

War es hilfreich?

Lösung

> bedeutet " ist ein untergeordnetes Element von ". So body > *:not(.toolbar) paßt *:not(.toolbar), dass ein Kind von body ist.

*:not(.toolbar) passt auf jedes Element, das nicht die Klasse .toolbar hat.

*[selected="true"] paßt zu jedem Element mit dem selected zu true gleich zuschreiben.

Beachten Sie, dass die letzten beiden (*:not() und *[] sind Teil der CSS3-Spezifikation und Sie können sie für Cross-Browser CSS-Kompatibilität in der Regel nicht verlassen. Sie sind jedoch vollständig in WebKit unterstützt, ist das, was das iPhone (und folglich IUI) verwendet werden.

Andere Tipps

  • > bedeutet ein direktes Kind
  • * ist ein universeller Selektor (alles)
  • bedeutet :not() nichts außer dem, was ist in den Klammern
  • bedeutet *[] alles, was, was in den Klammern
    • passt ist

In Ihrem Fall: 

body > *:not(.toolbar)   // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

> und * sind in der CSS 2.1-Spezifikation definiert. Die :not Pseudo-Klasse und die [] Wähler sind in der CSS-3-Spezifikation definiert.

Siehe auch: http://www.w3.org/TR/CSS21/selector. html und http://www.w3.org/TR/css3-selectors / für weitere Informationen.

  

bedeutet geordnetes Element 

.cont > div {
    color: #fff;
}

Dies wäre: 

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

  • > - Kindselektor

    d. 

    div > p > b {
 font-size:100px;
}

    Dies wird alle b Tags innerhalb p Tags innerhalb div Tags auswählen.

  • :not(..) - nicht Selektor

    Spiele jedes Element auf der Seite, die nicht die Kriterien in der Klammer der nicht-Anweisung nicht erfüllt. d. 

    div:not(.toolbar)

    Wird jede div übereinstimmen, die nicht die Klasse Symbolleiste hat

  • [attr='val'] - Attributselektor

    Dies entspricht jedes Element, in dem das Attribut den angegebenen Wert übereinstimmt. Beispiel: Wenn Sie möchten, dass alle überprüft Kontrollkästchen rot machen. 

    input[checkec='true'] {
  background-color:red;
}

Sie sollten Google CSS 2.1-Selektoren für weitere Informationen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top