Was sind die Kombinationsselektoren?

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.

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 e388a4556c0f65e1904146cc1a846bee-Elemente auszuwählen, die sich innerhalb des dc6dce4a544fdca2df29d5ac0ea9906b-Elements befinden, können Sie den folgenden Selektor verwenden:

     div  p

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 e388a4556c0f65e1904146cc1a846bee-Elemente direkt innerhalb eines dc6dce4a544fdca2df29d5ac0ea9906b-Elements auszuwählen, können Sie den folgenden Selektor verwenden:

     div  >  p

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 e388a4556c0f65e1904146cc1a846bee-Elemente auszuwählen, die sich nach dem 4a249f0d628e2318394fd9b75b4636b1-Element befinden, können Sie den folgenden Selektor verwenden:

     h1  +  p

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 e388a4556c0f65e1904146cc1a846bee-Elemente auszuwählen, die sich nach dem 4a249f0d628e2318394fd9b75b4636b1-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 4a249f0d628e2318394fd9b75b4636b1-Elemente auszuwählen, können Sie den folgenden Selektor verwenden:

     h1  ~  p

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

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 e388a4556c0f65e1904146cc1a846bee auszuwählen, die sich innerhalb des dc6dce4a544fdca2df29d5ac0ea9906b-Elements befinden, können Sie den folgenden Selektor verwenden:

     .red.bold

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 3499910bf9dac5ae3c52d5ede7383485-Elemente im Schwebezustand auszuwählen, können Sie den folgenden Selektor verwenden:

     div  >  p

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

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!