Was sind hierarchische CSS3-Selektoren?

Zu den hierarchischen CSS3-Selektoren gehören: 1. Nachkommen-Selektor „E F“, der alle untergeordneten F-Elemente des E-Elements auswählt; 2. Untergeordneter Element-Selektor „E>F“, der alle untergeordneten Elemente F unter dem E-Element auswählt; . Der benachbarte Geschwisterelementselektor „E+F“ wählt das Element F unmittelbar nach dem E-Element aus. 4. Der Geschwisterselektor „E~F“.

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

Nachkommenselektor (E F)

Der Nachkommenselektor wird auch als Einschlussselektor bezeichnet. Seine Funktion besteht darin, die Nachkommenelemente eines bestimmten Elements auszuwählen, z. B.: E F, das vorhergehende E ist das Vorfahrenelement, Ｆ Bei untergeordneten Elementen bedeutet dies, dass alle untergeordneten F-Elemente des E-Elements ausgewählt werden. Bitte beachten Sie, dass zwischen ihnen ein Leerzeichen erforderlich ist. Unabhängig davon, ob F ein untergeordnetes Element oder ein untergeordnetes Element des E-Elements oder eine tiefere Beziehung ist, wird es ausgewählt. Mit anderen Worten, egal wie viele Beziehungsebenen F in E hat, es wird ausgewählt: Browser

.demo li {color: blue;}

Das Obige bedeutet, alle li-Elemente in div.demo auszuwählenspa

Der von allen Browsern unterstützte Nachkommenselektor. 3d

Wähler für untergeordnete Elemente (E>F)

Der Selektor für untergeordnete Elemente kann nur die untergeordneten Elemente eines bestimmten Elements auswählen, wobei E das übergeordnete Element und F das untergeordnete Element ist Unter diesen bedeutet E>F, dass alle Unterelemente F unter dem E-Element ausgewählt werden. Dies unterscheidet sich vom Nachkommenselektor (EF), bei dem F ein Nachkommenelement von E ist, und vom Unterelementselektor E > F, bei dem F nur ein Unterelement von E ist. Der Code auf Blog

ul > li {
background: green;
color: yellow;
}

gibt an, dass alle Unterelemente li unter ul ausgewählt sind. Zum Beispiel: bfc

IE6 unterstützt keine Selektoren für untergeordnete Elemente. im

Adjacent Sibling Element Selector (E + F)

Adjacent Sibling Element Selector kann Elemente unmittelbar nach einem anderen Element auswählen, und sie haben dasselbe übergeordnete Element, mit anderen Worten die beiden EF-Elemente haben das gleiche übergeordnete Element und das F-Element befindet sich hinter dem E-Element und angrenzend, sodass wir den Selektor für benachbarte Geschwisterelemente verwenden können, um das F-Element auszuwählen. demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Der obige Code zeigt an, dass das angrenzende Element li von li ausgewählt ist. Wir haben hier zehn li, also wählt der obige Code vom 2. li bis zum 10. li aus, insgesamt neun, bitte sehen Sie sich den Effekt an: db

Da das obige li + li das zweite li das benachbarte Element des ersten li ist und das dritte das zweite benachbarte Element ist, wird auch das dritte ausgewählt, und so weiter. Daher , die nächsten neun li sind alle ausgewählt. Wenn wir es anders betrachten, verstehen wir es vielleicht besser: img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Nach dem oben genannten Wissen wählt dieser Code offensichtlich li aus Für das li-Element neben aktiv Beachten Sie, dass neben li.active nur ein Element vorhanden ist. Wie im Bild gezeigt: di

IE6 unterstützt diesen Selektor nicht neu Zusätzlich zu CSS3 Ein Selektor, der alle Geschwisterelemente hinter einem Element auswählt. Sie ähneln auch benachbarten Geschwisterelementen und müssen sich im selben übergeordneten Element befinden. Mit anderen Worten, die E- und F-Elemente gehören zum selben übergeordneten Element. und das F-Element nach dem E-Element liegt, wählt der E ~ F-Selektor die F-Elemente nach allen E-Elementen aus. Zum Beispiel der folgende Code:

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Der obige Code bedeutet, dass alle Geschwisterelemente li hinter dem li.active-Element ausgewählt werden, wie in der Abbildung gezeigt:

Universeller Geschwisterselektor und benachbarter Geschwisterselektor Sehr ähnlich, außer dass der benachbarte Geschwisterselektor nur die Elemente auswählt, die an das Element angrenzen (nur ein Element wird ausgewählt), während der universelle Geschwisterselektor die benachbarten Geschwisterelemente des Elements auswählt Es kann verwirrend sein, dies zu erwähnen Schauen Sie sich die Darstellungen der angrenzenden Brüder genauer an. IE6 unterstützt die Verwendung dieses Selektors nicht.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas sind hierarchische CSS3-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!