Lernen von CSS-Selektoren: Lassen Sie uns über zusammengesetzte Selektoren sprechen (ausführliche Einführung)

Dieser Artikel gibt Ihnen eine detaillierte Einführung in den zusammengesetzten Selektor, den vereinten zusammengesetzten Selektor, den Pseudoklassen- und Pseudoelementselektor und den Attributselektor in CSS.

1. Schnittpunktselektor

• Auch als Tag-spezifischer Selektor bekannt

• Funktion: Inhalte auswählen, die mit zwei Tags gleichzeitig übereinstimmen

• Format: 1. Durch zwei Selektorzusammensetzung, der erste ist der Etikettenselektor, der zweite ist der Klassenselektor oder ID-Selektor 2. Zwischen den beiden Selektoren darf kein Leerzeichen stehen

• Zum Beispiel: Der Lehrer hat seine Klasse gefragt Alle Schüler in der Mitte Schule färbt ihre Haare rot

div.student{
				color: red;
}

2. Union-Verbindungsselektor

• Funktion: Definieren Sie den gleichen Stil für alle ausgewählten Selektoren

• Format: Jeder Selektor übergibt

  Komma Verbunden

• Hinweis: Jeder Selektor kann als Teil des Gewerkschaftsselektors verwendet werden (die Toleranz ist größer)

• Zum Beispiel: Der Schulleiter verlangt, dass der Schulslogan, alle Lehrer und Guo Yue in Zukunft nur noch im Song-Stil schreiben dürfen

p.slogn,.teacher,#gy{
				font-family: "宋体";
}

3. Ebenenselektor hinten, durch Leerzeichen getrennt

Zum Beispiel: Yu Gongs Nachkommen wollen sich gemeinsam die Haare färben

#yuGong .people{
   			color: red;
   		}

Hinweis: Zu diesem Zeitpunkt werden unter Yu Gongs Nachkommen

die Nachkommen aller Menschen ihre Haare färben

, einschließlich Yu Gongs Sohn, Enkel, Urenkel...

• 2. Zusammengesetzter Selektor für untergeordnete Elemente

Funktion: Wählen Sie das Element aus, das ein untergeordnetes Element (Sohn) eines bestimmten Elements ist

Format: Das übergeordnete Tag steht vorne, das untergeordnete Tag steht hinten und die Mitte ist durch > verbunden
• Hinweis: Zu diesem Zeitpunkt werden die

  Söhne von Yugong in den Nachkommen ihre Haare färben. Yugongs Enkel und Urenkel färben ihre Haare nicht, weil sie noch jung sind

  Hier werden nur Kinderelemente (leibliche Söhne) ausgewählt

3. Close Brothers Selector

• Funktion: Wählen Sie ein Element unmittelbar nach einem anderen Element aus, und beide haben das gleiche übergeordnete Element

• Format: Der Selector verwendet das Pluszeichen „+“ zum Verknüpfen die beiden Selektoren davor und danach. Die beiden Elemente im Selektor haben
denselben Vater
• , und das zweite Element muss

  dem ersten Element folgen

Zum Beispiel: Das dritte Kind unter den sieben Kürbisbrüdern möchte seine Haare färben (verwenden Sie dazu das zweite Kind). Suchen Sie das dritte untergeordnete Element : Verwenden Sie „~“, um die beiden Selektoren davor und danach zu verknüpfen. Die beiden Elemente im Selektor haben
• dasselbe übergeordnete Element

  , aber das zweite Element muss nicht dem ersten Element folgen .

Zum Beispiel: Das dritte Kind unter den sieben Calabash-Brüdern möchte seine Haare färben (verwenden Sie das große Kind, um das dritte Kind zu finden)

#yuGong>.people{
   			color: red;
}

4. Pseudoklassen- und Pseudoelementselektor

• 0. Was ist „Pseudo“?

• „Pseudo“ bedeutet, dass der Selektor zum Ändern von Teilen verwendet wird, die sich nicht im Dokumentbaum befinden.

Muss gelesen werden: http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1. Pseudoklassenselektor

Funktion: Wird verwendet, um vorhandenen Elementen entsprechende Stile hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden. Dieser Zustand ändert sich dynamisch basierend auf dem Benutzerverhalten.
Im Folgenden werden nur die
• Status-Pseudoklassen vorgestellt, die oben nicht im Detail erläutert wurden
  1) Link
Funktion: Legen Sie den nicht besuchten Stil dieses Elements (Hyperlink) fest

Format:

#secondBaby+#thirdBaby{
   			color: red;
}

2) besucht

• Funktion: Festlegen des besuchten Stils des Elements (Hyperlink)

• Format:

#bigBaby~#thirdBaby{
   			color: red;
}

3) Hover

Funktion : Legen Sie den Stil des Elements fest, wenn die Maus schwebt
Format:

• a:link{...}

  4) activer

Funktion: Legen Sie den Stil der Elementaktivität fest (Maus gedrückt)

• Format : 5) Fokus es , folgen Sie der link-visited-hover-Aktiven Reihenfolge, sonst können Fehler auftreten

• 2. Pseudo-Element-Selektor

• Funktion: Wird verwendet, um einige Elemente zu erstellen, die nicht im Dokumentbaum enthalten sind, und ihnen Stile hinzuzufügen.

::first-line

Selektor	Funktion	Format
::first-letter	Wählen Sie den ersten Buchstaben des Selektors aus	p::first-letterp::first-letter
::first-line	选取选择器的首行	p::first-line
::before	在选择器前增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::before{content: "hello ";}
::after	在选择器后增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::after{content: "hello ";}
::selection	匹配被用户选中或者处于高亮状态的部分	p::selection

Wählen Sie die erste Zeile des Selektors ausp::first-line

::beforeFügen Sie Inhalt vor dem Selektor hinzu und verwenden Sie den Inhalt Attribut, um den einzufügenden Inhalt anzugeben. (Der eingefügte Inhalt befindet sich tatsächlich nicht im Dokumentbaum) p::before{content: "hello ";}::afterUm Inhalte nach dem Selektor hinzuzufügen, verwenden Sie content-Attribut, um den einzufügenden Inhalt anzugeben. (Der eingefügte Inhalt befindet sich tatsächlich nicht im Dokumentbaum) p::after{content: "hello ";}::selectionDie Übereinstimmung wird vom Benutzer ausgewählt oder ist hervorgehoben Teil des Status p::selection 5. Attributselektor Selektor Funktion

Format

🎜🎜 🎜E[ att ^=value]🎜🎜Gibt an, dass der att-Attributwert des E-Tags mit „value“ beginnt🎜🎜p[id^='yuan']{color: red;}🎜🎜🎜🎜E[att$=value] 🎜🎜 Zeigt an, dass der att-Attributwert des E-Tags mit „value“ endet. 🎜🎜p[id$='chao']{ color: blue;} Attribut des E-Tags Der Wert enthält die Zeichenfolge „value“ 🎜🎜p[class*='shi']{font-size: 35px;}🎜🎜🎜🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Einführung in Programmieren🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLernen von CSS-Selektoren: Lassen Sie uns über zusammengesetzte Selektoren sprechen (ausführliche Einführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!