Was bedeutet > in CSS?

Question

In der IUI-CSS-Datei werden die folgenden Selektoren verwendet:

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

Was bedeuten die Zeichen >, *:not() und *[]?

Gracias.

Answer 1

> bedeutet " ist ein untergeordnetes Element von ". Also body > *:not(.toolbar) passt zu *:not(.toolbar) das ist ein Kind von body .

*:not(.toolbar) passt zu jedem Element, das nicht die Klasse .toolbar .

*[selected="true"] passt auf jedes Element mit der selected Attribut gleich true .

Beachten Sie, dass die letzten beiden ( *:not() y *[] sind Teil der CSS3-Spezifikation und man kann sich normalerweise nicht auf sie verlassen, wenn es um browserübergreifende CSS-Kompatibilität geht. Sie sind jedoch vollständig in WebKit unterstützt, was das iPhone (und folglich iUI) zu verwenden ist.

Answer 2

• > bedeutet ein direktes Kind
• * ist ein universeller Selektor (alles)
• :not() bedeutet alles außer dem, was in den Klammern steht
• *[] bedeutet alles, was mit den Angaben in den Klammern übereinstimmt

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"

> y * sind in der CSS 2.1-Spezifikation definiert. Die :not Pseudoklasse und die [] Selektor sind in der CSS 3-Spezifikation definiert.

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

Answer 3

• > - Selektor für Kinder

  D.h.

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

  Damit werden alle b Tags innen p Tags innen div Tags.

• :not(..) - nicht Selektor

  Passt zu jedem Element auf der Seite, das die Kriterien in der Klammer der not-Anweisung nicht erfüllt, d. h.

  div:not(.toolbar)

  Passt zu jedem Div, das nicht die Klasse toolbar hat

• [attr='val'] - Attributselektor

  Dies passt zu jedem Element, bei dem das Attribut mit dem angegebenen Wert übereinstimmt. Beispiel: Sie möchten alle angekreuzten Kontrollkästchen rot machen.

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

Für weitere Informationen sollten Sie CSS 2.1-Selektoren googeln.

Answer 4

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