Was ist ein hierarchischer Selektor in CSS? Wie benutzt man es?

Im vorherigen Artikel „ Erklären Sie die grundlegenden Selektoren von CSS im Detail und sprechen Sie über die Selektorpriorität“ haben wir etwas über die grundlegenden Selektoren in CSS gelernt. In diesem Artikel werden wir über hierarchische Selektoren sprechen Alle haben geholfen!

Level Selector CSS Level Selector ist eine Selektorverwendung, die auf der Beziehung zwischen HTML-Knotenbäumen basiert. Wenn Sie also Level Selector gut lernen möchten, müssen Sie zunächst die Beziehung zwischen Elementen in HMTL verstehen sieht aus wie. [Empfohlenes Lernen: CSS-Video-Tutorial ]

Schauen Sie sich zunächst den folgenden HTML-Code an:

nbsp;html>

HTML测试代码

Der obige Code kann als folgender Knotenbaum gezeichnet werden, wie in der Abbildung unten gezeigt

Schauen wir uns nun an ein HTML-Element Es gibt drei Beziehungen zwischen Elementen in HTML-Seiten wie folgt:

Die Beziehung zwischen Eltern und Kind : Im obigen Code ist das linke -Element übergeordnetes Element des

-Elements, und umgekehrt ist

das der untergeordneten Elemente. Es gibt noch viele weitere solcher Eltern-Kind-Strukturen. 元素是

元素的的父级元素，反之

是 的子级元素，当然这种父子结构还有跟多。 兄弟之间的关系 ：在上述代码代码中，

元素和

元素是兄弟元素， 元素和 元素也是兄弟元素。

祖先与后代之间的关系 ：在上述代码代码中，

元素是 元素的后代元素，反之 元素是

元素的祖先元素。

层级选择器种类

根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法：

后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。

子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。

相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素

普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。

选择符

CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示

表示后代关系的空格（ ）

表示父子关系的尖括号（ > ）

表示相邻兄弟关系的加号（ + ）

表示兄弟关系的波浪号（ ~

Beziehung zwischen Brüdern : Im obigen Code sind das

-Element und das

-Element Geschwisterelemente, Das Das Element und das Element sind ebenfalls gleichgeordnete Elemente.

Die Beziehung zwischen Vorfahren und Nachkommen : Im obigen Code ist das Element

das Nachkommenelement des Elements . und umgekehrt. Das Element ist der Vorfahre des Elements

.

Typen hierarchischer Selektoren

Entsprechend den drei Beziehungen zwischen HTML-Elementen bieten hierarchische CSS-Selektoren die folgenden vier Verwendungsmöglichkeiten:

Nachkommenselektor: Behandeln Sie ein Element als Vorfahrenelement und suchen Sie alle Nachkommenelemente dieses Elements.

Untergeordneter Selektor: Behandeln Sie ein Element als übergeordnetes Element und suchen Sie alle untergeordneten Elemente dieses Elements.

Angrenzender Geschwisterselektor: Verwendet ein bestimmtes Element als Zielelement und sucht das nächste angegebene Element, das dasselbe übergeordnete Element wie das Zielelement hat.

Gewöhnlicher Geschwisterselektor: Verwendet ein bestimmtes Element als Zielelement, Position jedes angegebene Element, das dasselbe übergeordnete Element wie das Zielelement hat.

Selektoren

Die 4 von CSS bereitgestellten Selektoren entsprechen den vier Verwendungen von Multiple-Choice-Fragen auf CSS-Ebene, wie unten gezeigt.

Eltern-Kind-Beziehung Die spitzen Klammern ( > )

Das Pluszeichen, das die benachbarte Geschwisterbeziehung angibt ( + )

🎜 Die Tilde, die die Geschwisterbeziehung angibt ( ~ ) 🎜🎜🎜🎜In der Webentwicklung werden die ersten beiden häufiger verwendet – 🎜Nachkommenselektor🎜 und 🎜Kinderselektor🎜. 🎜🎜Werfen wir zunächst einen Blick auf einen Teil des Codes: 🎜 使用CSS3层次选择器 * {margin:0;padding:0;} body {width: 300px; margin:0 auto;} div{margin:5px;padding:5px;border:1px solid #ccc;} 1 2 3 4 5 6 7 8 9 10 🎜🎜🎜🎜🎜Der Nachkommenselektor🎜🎜🎜 wird verwendet, um alle Nachkommenelemente eines bestimmten Elements auszuwählen. Was wird beispielsweise im obigen HTML-Code sein? Wirkung der Verwendung des folgenden Stils? 🎜 body div { background-color: yellow; } 🎜Hier wird die Hintergrundfarbe des abgeleiteten div-Elements des body-Elements auf Gelb gesetzt. Mit anderen Worten: Alle Divs sind gelb eingefärbt. 🎜🎜🎜🎜🎜🎜Untergeordneter Selektor🎜🎜🎜 wird verwendet, um alle untergeordneten Elemente der ersten Ebene unter einem bestimmten Element (möglicherweise mehreren Elementen) auszuwählen. Welchen Effekt hat es beispielsweise, wenn wir den folgenden Selektor und Stil verwenden? 🎜 body > div { background-color: red; } 🎜Nachdem Sie die Div-Elemente der ersten Ebene unter dem Körper so eingestellt haben, hier sind die Div-Elemente mit den Inhalten 1, 2, 3, 4 und 7, setzen Sie die Hintergrundfarbe auf Rot. 🎜🎜🎜🎜🎜🎜Angrenzender Geschwister-Selektor🎜🎜🎜 wird verwendet, um das nächste Element im Geschwisterverzeichnis eines Elements (oder einiger Elemente) auszuwählen. Wie wird beispielsweise der Effekt aussehen, wenn wir hier die folgenden Stileinstellungen verwenden? 🎜 .active + div { background-color: green; } 🎜Hier setzen wir den benachbarten Geschwisterknoten des .active-Selektors, der das zweite div-Element ist, und setzen seine Hintergrundfarbe auf Grün. 🎜🎜🎜🎜🎜🎜Universeller Geschwisterselektor🎜🎜🎜 wird verwendet, um alle folgenden Tags im Geschwisterverzeichnis eines bestimmten (oder einiger) Elements auszuwählen. Es ähnelt dem benachbarten Geschwisterselektor und muss sich im selben übergeordneten Element befinden. 🎜 比如使用下面的代码，影响到的样式：

.active ~ div { background-color: pink; } 这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。

（学习视频分享： web前端入门 ）

Was ist ein hierarchischer Selektor in CSS? Wie benutzt man es?

In Verbindung stehende Artikel