Child Selector (CSS -Selektor)

Beschreibung

Dieser Selektor entspricht allen Elementen, die die unmittelbaren Kinder eines bestimmten Elements sind. Der Kombinator in einem Kinderwahl ist ein größeres Zeichen (>). Es kann von Whitespace -Charakteren umgeben sein, aber wenn dies der Fall ist, behandelt es Internet Explorer 5 unter Windows fälschlicherweise als Nachkommenswähler. Die beste Praxis ist also, die Whitespace in diesem Kombinator zu vermeiden.

Betrachten Sie dieses HTML -Fragment:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

Versuchen wir, Elemente im obigen Fragment mit dem folgenden Selektor abzustimmen:

ul>li {
  ⋮ <span>declarations
</span>}

Der obige Kinderwählte entspricht nur den beiden Li -Elementen, die Kinder des UL -Elements sind. Es entspricht nicht den Subitems, weil ihr Elternteil das OL -Element ist.

Beispiel

Hier ist ein Beispiel für den Kinderwähler bei der Arbeit:

ul>li {
  ⋮ <span>declarations
</span>}

Dieser Selektor entspricht allen Li -Elementen, die die unmittelbaren Kinder eines UL -Elements sind - das heißt alle Li -Elemente, die ein UL -Element als Elternteil haben.

häufig gestellte Fragen (FAQs) zu CSS Child Selectors

Was ist der Unterschied zwischen einem untergeordneten Selektor und einem Nachkommenswähler in CSS? Der untergeordnete Selektor verwendet das Symbol „>“, während der Nachkommenswähler einen Raum verwendet. Beispielsweise wählt „Div> p“ nur Absätze aus, die direkte Kinder eines Divs sind, während „Div p“ alle Absätze innerhalb eines DIV ausgewählt, unabhängig von ihrer Verachtungstufe. Beispielsweise wählt „Div> P: First-Child“ nur den ersten Absatz aus, der ein direktes Kind eines DIV ist. Dies ist nützlich, wenn Sie Stile nur auf das erste Kind eines Elements anwenden möchten. Beispielsweise wählt "Div> input [type =" text "] alle Texteingangsfelder aus, die direkte Kinder eines Divs sind. Zum Beispiel wird "#mydiv> .myclass" alle Elemente mit der Klasse "Myclass" auswählen, die direkte Kinder des Elements mit der ID "mydiv" sind.

Kann ich den untergeordneten Selektor verwenden, um nur auf das letzte Kind eines Elements abzuzielen? Beispielsweise wählt „Div> P: Last-Child“ nur den letzten Absatz aus, der ein direktes Kind eines Divs ist. Dies kann nützlich sein, um Layouts und Stile basierend auf Bildschirmgröße oder Gerätetyp anzupassen. Beispielsweise wählt „Div> p :: vor“ die Pseudoelement aller Absätze ":: vor" aus, die direkte Kinder eines Divs sind. Der untergeordnete Selektor erhöht die Spezifität einer Regel, was bedeutet, dass alle widersprüchlichen Regeln mit geringerer Spezifität außer Kraft gesetzt werden. Zum Beispiel hat „Div> p“ eine höhere Spezifität als nur „P“. Zum Beispiel wird "Div> p: n-Child (ungerade)" alle ungeraden Absätze auswählen, die direkte Kinder eines Divs sind. Es wird jedoch in Internet Explorer 6 oder älteren Versionen nicht unterstützt. Überprüfen Sie immer den aktuellen Browser -Support, wenn Sie erweiterte CSS -Selektoren verwenden.

Das obige ist der detaillierte Inhalt vonChild Selector (CSS -Selektor). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!