Welche Arten von CSS3-Beziehungsselektoren gibt es?

Es gibt 4 Arten von CSS3-Beziehungsselektoren: 1. Der Einschlussselektor „E F“ wählt alle im E-Element enthaltenen F-Elemente aus. 2. Der Nachkommenselektor „E>F“ wählt alle direkten untergeordneten Elemente des E-Elements F aus; 3. Der benachbarte Selektor „E+F“ wählt das F-Element aus, das unmittelbar auf das E-Element folgt. 4. Der Geschwisterselektor „E~F“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Beziehungsselektoren in CSS3 umfassen hauptsächlich Einschlussselektoren, Nachkommenselektoren, benachbarte Selektoren und Geschwisterselektoren:

Einschlussselektoren sind durch das Symbol „Leerzeichen“ verbunden.

Kinderselektoren sind durch das Symbol „ &gt“ verbunden ; " > ”连接

相邻选择器由符号“ + ”连接

兄弟选择器由符号“ ～

Benachbarte Selektoren werden durch das Symbol „ + “ verbunden.

Geschwisterselektoren werden durch das Symbol „ ～ “ verbunden

Wir werden es weiter unten im Detail erklären. Enthält Selektor (E F)

Wählt alle F-Elemente aus, die in E-Elementen enthalten sind, getrennt durch Leerzeichen ul li{color:green;}

宝马 奔驰 奥迪

CSS3-Nachkommenselektor (E>F)

Kinderselektor Haupt Wird zur Auswahl des untergeordneten Elements der ersten Ebene verwendet Elemente eines Elements. Wenn Sie beispielsweise das starke Element auswählen möchten, das nur ein untergeordnetes Element des h1-Elements ist, können Sie Folgendes schreiben: h1> Im Folgenden wird ein Fall verwendet, um die Verwendung des Nachkommenselektors (>) zu demonstrieren, wie in der Abbildung gezeigt:

nbsp;html>

CSS3子代选择器用法 h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; }

这个 知识点 很 重要 PHP 中文网 欢迎你！

Im obigen Code ist das starke Element in der 15. Codezeile ein untergeordnetes Element von h1 Element und die 16. Zeile Das starke Element in der Codezeile ist das Enkelelement des h1-Elements, sodass der im Code festgelegte Stil nur für die 15. Codezeile gültig ist.

CSS3-Geschwisterselektor (E+F)

Dieser Selektor verwendet das Pluszeichen „+“, um die beiden Selektoren davor und danach zu verknüpfen. Die beiden Elemente im Selektor haben dasselbe übergeordnete Element und das zweite Element muss unmittelbar auf das erste folgen.

Im Folgenden wird anhand eines Falls die Verwendung des benachbarten Geschwisterselektors demonstriert. nbsp;html>

CSS3紧邻兄弟选择器用法 p + h2{ color: green; font-family: "宋体"; font-size: 20px; }

《赠汪伦》 李白乘舟将欲行，

忽闻岸上踏歌声。 桃花潭水深千尺，

不及汪伦送我情。 Im obigen Code werden die Zeilen 7 bis 11 verwendet, um den Stil für das erste Geschwisterelement h2 unmittelbar nach dem p-Element zu definieren. Aus der Struktur ist ersichtlich, dass die Position des ersten Geschwisterelements unmittelbar nach dem p-Element die 17. Codezeile ist, sodass der Textinhalt der 17. Codezeile im definierten Stil angezeigt wird.

Wie Sie auf dem Bild sehen können, wird nur auf das h2-Element, das unmittelbar auf das p-Element folgt, der im Code festgelegte Stil angewendet.

CSS3 benachbarte Selektoren (E~F)

Gewöhnliche Geschwisterselektoren verwenden „~“, um die beiden Selektoren davor und danach zu verknüpfen. Finden Sie alle Geschwisterknoten hinter einem angegebenen Element. Im Folgenden wird anhand eines Falls die Verwendung gewöhnlicher Geschwisterselektoren demonstriert, wie unten gezeigt. CSS3普通兄弟选择器~用法 p ~ h2{ color: pink; font-family: "微软雅黑"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行，

忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。

🎜🎜🎜Wie Sie auf dem Bild sehen können, werden auf alle Geschwisterelemente h2 nach dem p-Element die im Code festgelegten Stile angewendet. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Welche Arten von CSS3-Beziehungsselektoren gibt es?

In Verbindung stehende Artikel