Kombinierte Selektoren umfassen Nachkommenselektoren, Selektoren für untergeordnete Elemente, Selektoren für benachbarte Geschwister, Selektoren für universelle Geschwister, Gruppenselektoren, Schnittselektoren, Unterselektoren, Pseudoklassenselektoren, Pseudoelementselektoren usw. Detaillierte Einführung: 1. Der Nachkommenselektor gleicht Elemente ab, indem er die Nachkommenelemente des Elements auswählt. Er verwendet Leerzeichen, um die Beziehung zwischen Elementen anzuzeigen. 2. Der Unterelementselektor gleicht Elemente ab, indem er die direkten Unterelemente des Elements auswählt. > Das Symbol „;“ stellt die Beziehung zwischen Elementen dar. 3. Der benachbarte Geschwisterselektor gleicht Elemente ab, indem er das nächste Geschwisterelement des Elements usw. auswählt.

Was sind die Kombinationsselektoren?

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

In CSS ist das Kombinieren von Selektoren eine Möglichkeit, bestimmte Elemente auszuwählen, indem mehrere Selektoren kombiniert werden. Durch die Kombination von Selektoren können wir die Elemente, die gestylt werden müssen, präziser auswählen. Im Folgenden werde ich einige gängige Kombinationsselektoren vorstellen.

1. Descendant Selector:

Der Descendant Selector gleicht Elemente ab, indem er ihre Nachkommenelemente auswählt. Es verwendet Leerzeichen, um Beziehungen zwischen Elementen anzuzeigen. Um beispielsweise alle

-Elemente auszuwählen, die sich innerhalb des

-Elements befinden, können Sie den folgenden Selektor verwenden:

     div  p

Nach dem Login kopieren

2. Der untergeordnete Selektor wählt das direkte untergeordnete Element des abzugleichenden Elements aus das Element. Es verwendet das Symbol „>“, um Beziehungen zwischen Elementen anzuzeigen. Um beispielsweise alle

-Elemente direkt innerhalb eines

-Elements auszuwählen, können Sie den folgenden Selektor verwenden:

     div  >  p

Nach dem Login kopieren

3. Der benachbarte Geschwisterselektor wählt das nächste gleichgeordnete Element aus, das mit dem Element übereinstimmt Element. Es verwendet das „+“-Symbol, um Beziehungen zwischen Elementen anzuzeigen. Um beispielsweise alle

-Elemente auszuwählen, die sich nach dem

-Element befinden, können Sie den folgenden Selektor verwenden:

     h1  +  p

Nach dem Login kopieren

4. Der allgemeine Geschwisterselektor wählt alle Elemente aus, die mit Elementen übereinstimmen . Es verwendet das Symbol „~“, um Beziehungen zwischen Elementen anzuzeigen. Um beispielsweise alle

-Elemente auszuwählen, die sich nach dem

-Element befinden, können Sie den folgenden Selektor verwenden:
Der Gruppenselektor kombiniert mehrere Auswahlmöglichkeiten mit Kommas alle Elemente, die mit einem der Selektoren übereinstimmen. Um beispielsweise alle

-Elemente auszuwählen, können Sie den folgenden Selektor verwenden:

     h1  ~  p

Nach dem Login kopieren

6. Der Schnittpunktselektor gleicht Elemente ab, indem er mehrere Selektoren gleichzeitig erfüllt. Es verwendet Leerzeichen, um mehrere Selektoren zusammenzufassen. Um beispielsweise alle Elemente mit der Klasse „rot“ und „fett“ auszuwählen, können Sie den folgenden Selektor verwenden:

     h1,  p

Nach dem Login kopieren

7. Untergeordneter Selektor:

Der untergeordnete Selektor stimmt überein, indem er die untergeordneten Elemente des Elementelements auswählt. Es verwendet das Symbol „>“, um Beziehungen zwischen Elementen anzuzeigen. Um beispielsweise alle direkten untergeordneten Elemente

auszuwählen, die sich innerhalb des

-Elements befinden, können Sie den folgenden Selektor verwenden:

     .red.bold

Nach dem Login kopieren

8. Für die Auswahl A wird der Pseudoklassenselektor verwendet spezifischer Zustand oder Position eines Elements. Sie beginnen mit einem Doppelpunkt „:“ und werden an das Ende des Selektors angehängt. Um beispielsweise alle -Elemente im Schwebezustand auszuwählen, können Sie den folgenden Selektor verwenden:

     div  >  p

Nach dem Login kopieren

9. Pseudoelement-Selektor wird verwendet, um einen bestimmten Teil eines Elements auszuwählen generierte Inhalte. Sie beginnen mit einem Doppelpunkt „::“ und werden an das Ende des Selektors angehängt. Um beispielsweise das erste Wort jedes Absatzes auszuwählen, können Sie die folgenden Selektoren verwenden:

     a:hover

Nach dem Login kopieren

Dies sind einige gängige Kombinationsselektoren, die uns bei der Auswahl der Elemente helfen können, die präziser gestaltet werden müssen. Durch die flexible Verwendung dieser kombinierten Selektoren können wir den Stil der Seite besser steuern und anpassen. Ich hoffe, dass diese Einführung in kombinierte Selektoren Ihnen helfen kann, CSS besser zu verstehen und zu verwenden.

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

Verwandte Etiketten：

组合选择器

Quelle：php.cn

Vorheriger Artikel：Methode zur Erstellung von Intouch-Berichten Nächster Artikel：Was sind die Zahlenwähler?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors