Spezifische Verwendung zusammengesetzter CSS-Selektoren

Kreuzungsauswahl

Der Schnittpunktselektor besteht aus zwei direkt verbundenen Selektoren, wobei der erste Selektor ein Elementselektor und der zweite Selektor ein Klassenselektor oder ein ID-Selektor sein muss. Die beiden Selektoren müssen fortlaufend und ohne Leerzeichen geschrieben werden.
Die vom Schnittmengenselektor ausgewählten Elemente müssen vom Elementtyp sein, der vom ersten Selektor angegeben wurde, und das Element muss den ID-Namen oder Klassennamen enthalten, der dem zweiten Selektor entspricht. Der Stil der vom Schnittpunktselektor ausgewählten Elemente ist der Stil der drei Selektoren, nämlich des ersten Selektors;

Grammatik:

Elementselektor. Klassenselektor | #ID-Selektor { 
 Attribut 1: Attributwert 1;
 Attribut2: Attributwert 2;
}

Syntaxbeschreibung: „Klassenselektor | ID-Selektor“ bedeutet, den Klassenselektor oder den ID-Selektor zu verwenden.

Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Stile mit dem Schnittpunktselektor festlegen</title>
<Stil>
/* Der Elementselektor legt die Rahmen- und unteren Randstile fest*/
div { 
 Rand: 5px durchgehend rot;
 Rand unten: 20px;
}
/* Hintergrundfarbe des Schnittpunktselektors festlegen */
div.txt { 
 Hintergrund: #33FFCC;
}
/* Klassenselektor zum Festlegen des Schriftformats */ 
.txt { 
 Schriftstil: kursiv;
}
</Stil>
</Kopf>
<Text>
    <div>Elementauswahleffekt</div>
    <div class="txt"> Schnittpunkt-Selektoreffekt</div>
    <span class="txt">Klassenauswahleffekt</p>
</body>
</html>

Union-Selektor

Der Union-Selektor wird auch als Gruppenselektor oder Gruppenselektor bezeichnet. Er besteht aus zwei oder mehr beliebigen Selektoren. Verschiedene Selektoren werden durch "," getrennt, um eine "kollektive Deklaration" mehrerer Selektoren zu erreichen.

Die Besonderheit des Union-Selektors besteht darin, dass der festgelegte Stil für jeden Selektor im Union-Selektor wirksam ist.

Die Funktion des Union-Selektors besteht darin, dieselben Stile aus verschiedenen Selektoren zu extrahieren und sie für eine einmalige Definition an einer Stelle abzulegen, wodurch die Menge des CSS-Codes vereinfacht wird.

Grammatik:

Selektor 1,
Selektor 2,
Selektor 3,
 { 
     Attribut 1: Attributwert 1;
     Attribut2: Attributwert 2;
}

Syntaxbeschreibung: Der Selektortyp kann beliebig sein, es kann ein Basisselektor oder ein zusammengesetzter Selektor sein.

Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Verwenden des Union-Selektors zum Festlegen von Stilen</title>
<Stil>
div {
    Rand unten: 10px;
    Rand: 3px durchgehend rot;
}
Spanne { 
    Schriftgröße: 26px;
}
P { 
    Schriftstil: kursiv;
}
/* Verwenden Sie den Union-Selektor, um den gemeinsamen Stil der Elemente festzulegen */
Spanne,
.p1,
#d1 { 
    Hintergrund:#CCC;
}
</Stil>
</Kopf>
<Text>
     <div id="d1"> Dies ist DIV1</div>
     <div>Dies ist DIV2</div>
     <p class="p1"> Dies ist Absatz 1</p>
     <p> Dies ist Absatz 2</p>
     <span>Dies ist ein SPAN</div>
</body>
</html>

Nachkommenselektoren

Nachkommenselektoren, auch Containment-Selektoren genannt, werden verwendet, um Nachkommenelemente eines angegebenen Elements auszuwählen. Durch die Verwendung von Nachkommenselektoren können wir das Zielelement schneller und genauer finden.

Grammatik:

Selektor 1 Selektor 2 Selektor 3 { 
    Attribut 1: Attributwert 1;
 Attribut2: Attributwert 2;
}

Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Stile mit Nachkommenselektoren festlegen</title>
<Stil>
#box1 .p1 { /* Nachkommenselektor */
    Hintergrund:#CCC;
}
#box2 p { /* Nachkommenselektor */
    Hintergrund:#CFC;
}
</Stil>
</Kopf>
<Text>
     <div id="box1">
         <p class="p1"> Absatz 1</p>
         <p class="p2"> Absatz 2</p>
     </div>
     <div id="box2">
         <p class="p1"> Absatz 3</p>
         <p> Absatz 4 </p>
     </div>
     <p class="p1"> Absatz 5</p>
     <p> Absatz 6 </p>
</body>
</html>

Kinderauswahl

Mit dem Nachkommenselektor können Sie alle Nachkommenelemente eines bestimmten Elementtyps auswählen. Wenn Sie nur alle untergeordneten Elemente eines Elements auswählen möchten, müssen Sie den untergeordneten Elementselektor verwenden.

Grammatik:

Selektor1> Selektor2 {
      Attribut1: Attributwert 1; 
      Attribut2: Attributwert 2;
}

Syntaxbeschreibung: „>“ wird als linksverknüpfendes Zeichen bezeichnet und auf beiden Seiten davon können Leerzeichen erscheinen. „Selektor 1 > Selektor 2“ bedeutet „Wähle alle untergeordneten Elemente aus, die durch Selektor 2 angegeben wurden und die die durch Selektor 1 angegebenen Elemente sind“.

Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Beispiel für die Verwendung eines Unterelement-Selektors</title>
<Stil>
h1>Spanne {
    Farbe: rot;
}
</Stil>
</Kopf>
<Text>
    <h1>Dies ist ein sehr, sehr <span> wichtiger</span> und <span> entscheidender</span> Schritt. </h1>
    <h1>Dies ist ein wirklich <em><span> wichtiger</span> und <span> entscheidender</span></em> Schritt. </h1>
</body>
</html>

Auswahlmöglichkeit für benachbarte Geschwister

Wenn Sie ein Element auswählen müssen, das unmittelbar nach einem anderen Element liegt, und beide das gleiche übergeordnete Element haben, können Sie den Selektor für benachbarte Geschwister verwenden.

Grammatik:

Selektor1+Selektor2 {
     Attribut1: Attributwert 1; 
     Attribut2: Attributwert 2;
}

Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Anwendungsbeispiel für einen Selektor für benachbarte Geschwister</title>
<Stil>
h1+p {
     Farbe: rot;
     Schriftstärke: fett;
     Rand oben: 50px;
}
p + p {
     Farbe: blau;
     Textdekoration: Unterstreichen;
}
</Stil>
</Kopf>
<Text>
     <h1>Dies ist eine Überschrift der ersten Ebene</h1>
     <p> Dies ist Absatz 1. </p>
     <p> Dies ist Absatz 2. </p>
     <p> Dies ist Absatz 3. </p>
</body>
</html>

Attributselektoren

In CSS können wir Elemente auch anhand ihrer Attribute und Attributwerte auswählen. Der hierbei verwendete Selektor wird als Attributselektor bezeichnet. Es gibt zwei Hauptformen von Attributselektoren:

Grammatik:

Attributselektor 1 Attributselektor 2...{
     Attribut1: Attributwert 1;
     Attribut2: Attributwert 2;
}

Elementselektor Attributselektor 1 Attributselektor 2... {
     Attribut1: Attributwert 1;
     Attribut2: Attributwert 2;
}

Syntaxbeschreibung: Der Attributselektor wird als [Attributausdruck] geschrieben, wobei der Attributausdruck ein Attributname oder ein Ausdruck wie „Attribut = Attributwert“ sein kann.

Anwendung von Attributselektoren:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Anwendung von Attributselektoren</title>
<Stil>
[title] {/* Wähle Elemente mit einem Titelattribut aus */
     Farbe: #F6F;
}
a[href][title]{/* wähle ein Element aus, das sowohl href- als auch title-Attribute hat*/
     Schriftgröße: 36px;
}
img[alt] {/* Wähle img-Elemente mit Alt-Attribut aus */
     Rand: 3px #f00 durchgezogen;
}
p[align="center"] {/* Wähle p Elemente mit dem Align-Attribut gleich center aus*/
     Farbe: rot;
    Schriftstärke: fett;
}
</Stil>
</Kopf>
<Text>
     <h2> Attributauswahlstile anwenden: </h2>
     <h3 title="Hallo Welt">Hallo Welt</h3>
     <a title="Home"href="#"> Zurück zur Startseite</a><br/><br/>
     <img src="miaov.jpg" alt="logo" />
     <p align="center"> Absatz 1</p>
     <hr />
     <h2> Kein Attribut-Selektor-Stil angewendet <h3>Hallo Welt</h3>
     <a href="#">Zurück zur Startseite</a><br/><br/>
     <img src="miaov.jpg">
     <p align="right"> Absatz 2</p>
</body>
</html>

Dies ist das Ende dieses Artikels über die spezifische Verwendung von CSS-Compound-Selektoren. Weitere relevante Inhalte zu CSS-Compound-Selektoren finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript

>>: Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python

Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)

Die wesentlichen Inhalte dieses Artikels sind wie...

Spezifische Verwendung zusammengesetzter CSS-Selektoren

Kreuzungsauswahl

Union-Selektor

Nachkommenselektoren

Kinderauswahl

Auswahlmöglichkeit für benachbarte Geschwister

Attributselektoren

Eine kurze Diskussion über allgemeine Operationen von MySQL in cmd und Python

Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien

Lösen Sie das Problem, dass der Knotenprozess im Linux-System ausgeführt wird, aber nicht beendet werden kann

Bedeutung und Berechnungsmethode von QPS und TPS der MySQL-Datenbank

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

Javascript implementiert die Webversion des Flipperspiels

Zusammenfassung verschiedener Methoden für JavaScript um festzustellen ob es sich um ein Array handelt

Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen

Einige Funktionen der Verwendung von tcpdump zum Erfassen von Paketen in der Linux-Befehlszeile

Regeln für die Verwendung gemeinsamer MySQL-Indizes

Artikel empfehlen

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

WHMCS V7.4.2 Grafisches Installationstutorial

SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

MySql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „OR“

Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)

Lösungsbeispiel und Erklärung für Fehler beim Importieren und Exportieren von Daten in MySQL-Datenbanken

Was sind die Unterschiede zwischen var let const in JavaScript

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu

Node+Express zum Erzielen eines Paging-Effekts

Eine detaillierte Einführung in die drei Installationsmethoden von RPM, Yum und Quellcode unter Linux

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion

Eine kurze Einführung in die einfache Verwendung der CentOS7-Firewall und offener Ports