Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2021-07-16 10:11:30
nach vorne
2291 Leute haben es durchsucht

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.

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

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;
    }
    Nach dem Login kopieren

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: "宋体";
    }
    Nach dem Login kopieren
    3. Ebenenselektor hinten, durch Leerzeichen getrennt

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

#yuGong .people{
   			color: red;
   		}
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
2) besucht

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

  • Format:

#bigBaby~#thirdBaby{
   			color: red;
}
Nach dem Login kopieren

3) Hover

    Funktion : Legen Sie den Stil des Elements fest, wenn die Maus schwebt
  • Format:
  • a:link{...}
    Nach dem Login kopieren
    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!

Verwandte Etiketten:
Quelle:csdn.net
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage