Nachkommenswahl (CSS -Selektor)

detaillierte Erläuterung des CSS -Nachkommensauswahls

Zielauswahl wird verwendet, um alle Nachkommenelemente des angegebenen Elements zu entsprechen. Der erste einfache Selektor im Selektor repräsentiert das Vorfahrelement-ein höheres Element in der Struktur, wie das übergeordnete Element, das übergeordnete Element des übergeordneten Elements usw. Der zweite einfache Selektor repräsentiert die Nachkommenelemente, die wir anpassen möchten.

Der in Nachkommenselektoren verwendete Kombinierer ist ein Raumzeichen: Platz, horizontale Registerkarte, Kutschenrückgabe, Zeilenunterbrechung oder Seitenunterbrechung. Da Space -Zeichen um den Kombinierer zugelassen sind, können Sie mehrere Speicherzeichen zwischen einfachen Selektoren in Nachkommenswählern aufnehmen.

Betrachten Sie den folgenden HTML -Snippet:

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul></code>

Wir werden versuchen, Elemente im obigen Fragment mit dem folgenden Selektor abzustimmen:

<code class="language-css">ul li {
  /* 声明 */
}</code>

li Dieser Nachkomme -Selektor entspricht allen vier li Elementen in der Probe HTML, da jedes ul Element ein

Element als Vorfahr hat.

ol Wir können auch den Nachkommenswahlschalter verwenden, um das li -Element innerhalb

im obigen Beispiel zu übereinstimmen:

<code class="language-css">ul * li {
  /* 声明 */
}
ul * * li {
  /* 声明 */
}
ul * ol li {
  /* 声明 */
}
ul li * li {
  /* 声明 */
}
ul ol li {
  /* 声明 */
}
ul li li {
  /* 声明 */
}
ul li ol li {
  /* 声明 */
}</code>

Wir können jedoch nicht den Nachkommenswahlschalter verwenden, um nur Listenelemente in einer nicht ordnungsgemäßen Liste zu übereinstimmen. Dazu brauchen wir einen Unterwählers.

Beispiel

Schauen wir uns ein Beispiel für die tatsächliche Anwendung des Nachkommenswählers an:

<code class="language-css">ul li {
  /* 声明 */
}</code>

ul Dieser Selektor entspricht allen li -Elementen, die Nachkommen von ul Elementen sind - dh jedes li Element mit

Elementen als Vorfahr.

CSS Nachkommenswahl FAQ (FAQ)

Was ist der Unterschied zwischen dem Nachkommenswählten und dem Kinderwähler in CSS?

In CSS werden sowohl Nachkommensauswahlern als auch Subselektoren verwendet, um Elemente basierend auf ihrer Beziehung zu anderen Elementen auszuwählen. Sie funktionieren jedoch anders. Der Nachkommenswähler wählt alle Elemente aus, die Nachkommen des angegebenen Elements sind. Dies bedeutet, dass es alle Kinderelemente, Enkelkindelemente, Urenkelkindelemente usw. auswählt. Andererseits wählt der Unterwählen nur direkte untergeordnete Elemente des angegebenen Elements aus, ohne tiefere Nachkommen auszuwählen.

Wie kann ich den Nachkommenswähler verwenden, um verschachtelte Elemente zu stylen?

div Um verschachtelte Elemente mit Nachkommenswähler zu stylen, müssen Sie das Ankunftselement angeben, gefolgt von Nachkommenselementen, die durch Leerzeichen getrennt sind. Wenn Sie beispielsweise alle Absatzelemente stylen möchten, die aus dem div p { /* 您的样式在此处 */ } -Element abgestuft werden, sollten Sie "div" schreiben. Dies wird den Stil auf alle Absatzelemente innerhalb von

anwenden, egal wie tief sie verschachtelt sind.

Kann ich in einer einzigen Regel mehrere Nachkommenselektoren verwenden?

div p, ul li { /* 您的样式在此处 */ } Ja, Sie können mehrere Nachkommensauswahlern in einer einzigen Regel verwenden. Dies ist nützlich, wenn Sie Elemente stylen möchten, die von mehreren Arten von Elementen abstammen. Beispielsweise wendet "div" den Stil auf Absatzelemente in

an und listet Elemente in einer nicht ordnungsgemäßen Liste auf.

Was ist die Spezifität des Nachkommensauswahls?

Die Spezifität der CSS -Regel ist ein Indikator für ihre Bedeutung. Es bestimmt, welche Regel angewendet wird, wenn eine widersprüchliche Regel vorliegt. Die Spezifität des Nachkommenselektors entspricht der Summe seiner Zusammensetzungsauswahlspezifitäten. Beispielsweise beträgt die Spezifität von "div p" 2, da sie zwei Typ -Selektoren enthält.

Kann ich Pseudoklassen mit Nachkommenswahlern verwenden?

Ja, Sie können Pseudoklassen mit Nachkommensauswahlern verwenden. Auf diese Weise können Sie Elemente basierend auf dem Status des Elements oder in dem Dokument aus auswählen. Beispielsweise wählt "div p:first-child { /* 您的样式在此处 */ }" das erste Absatzelement als div untergeordnetes Element aus.

Wie wirkt sich die Cascade aus, die Nachkommenselektoren haben?

Castifikation ist ein Prozess, durch den CSS die Regeln bestimmt, die auf Elemente angewendet werden sollen. Eine spätere Regel oder eine höhere spezifische Regel im Stilblatt erfüllt eine frühere oder eine niedrigere spezifische Regel. Dies bedeutet, dass, wenn Sie Regeln haben, die mit Nachkommenswahlstäben in Konflikt stehen, später oder spezifischere Regeln angewendet werden.

Kann ich den Nachkommenswählers mit Attributauswahl verwenden?

Ja, Sie können Nachkommensauswahlern mit Attributauswahl verwenden. Auf diese Weise können Sie Elemente basierend auf den Attributen des Elements und seiner Position im Dokument auswählen. Beispielsweise wählt "div p[class='highlight'] { /* 您的样式在此处 */ }" ein Absatzelement mit einer Klasse "Highlight" und als Nachkomme von div aus.

Wie kann ich den Nachkommenswähler zum Stil von Tischen verwenden?

Sie können Nachkommensauswahlern verwenden, um die Tabelle zu stylen, indem Sie Tabellenreihen, Zellen, Titel und andere Elemente basierend auf der Beziehung zwischen Tabellenelementen und Tabellenelementen auswählen. Beispielsweise wählt "table tr:nth-child(even) { /* 您的样式在此处 */ }" jede gleichmäßige Zeile in der Tabelle aus.

Kann ich Nachkommensauswahlern mit universellen Selektoren verwenden?

Ja, Sie können Nachkommenswahlern mit universellen Selektoren verwenden. Der universelle Selektor entspricht jedem Element und kann daher verwendet werden, um alle Nachkommen des angegebenen Elements auszuwählen. Beispielsweise wählt "div * { /* 您的样式在此处 */ }" alle Elemente aus, die Nachkommen von div sind.

Wie kann man eine Form mit dem Nachkommenswähler stylen?

Sie können Nachkommensauswahlern verwenden, um das Formular zu stylen, indem Sie Formularelemente basierend auf der Beziehung zwischen Formularelementen und Formularelementen auswählen. Beispielsweise wählt "form input[type='text'] { /* 您的样式在此处 */ }" alle Texteingangsfelder im Formular aus.

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