Spezifische Verwendung zusammengesetzter CSS-Selektoren

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

Artikel empfehlen

Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL

Spezifische Methode: 1. Öffnen Sie die Eingabeauf...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10

Super ausführliches Tutorial zur Installation und...

Detaillierte Erläuterung verschiedener Möglichkeiten zum Erstellen von Objekten und Objektmethoden in js

Dieser Artikel ist der zweite Artikel über Objekt...

Implementierung von verschiebbaren Zeilen und Spalten sowie Auswahlspaltenkomponenten basierend auf der el-table-Kapselung

Wirkung Brauchen Sie eine Umgebung Ansicht elemen...

Welche Wissenssysteme brauchen Webdesigner?

Produktdesigner sind mit komplexen und großen Fert...

Erläuterung der Dockerfile-Anweisungen und der grundlegenden Struktur

Durch die Verwendung von Dockerfile können Benutz...

Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen

1. Legen Sie den CORS-Antwortheader fest, um domä...

50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten

Hintergrund Kürzlich wollte ein Leiter, dass wir ...

So konvertieren Sie eine Spalte mit durch Kommas getrennten Werten in Spalten in MySQL

Vorwort Manchmal stößt man auf Geschäftstabellen,...

Grundlegende Verwendung von @Font-face und wie man es mit allen Browsern kompatibel macht

@Font-face grundlegende Einführung: @font-face ist...

So fragen Sie Daten innerhalb eines bestimmten Zeitraums mit dem Vue-Frontend und dem Django-Backend ab

Vorwort Während des Entwicklungsprozesses werden ...

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Problembeschreibung Bei Verwendung von Windows Se...

Analyse der Docker-Methode zum Erstellen lokaler Images

Der sogenannte Container erstellt tatsächlich ein...

Vue.js implementiert eine Bildwechselfunktion

In diesem Artikel wird der spezifische Code von V...

Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen

Sie werden oft HTML mit Datenattributen sehen. Die...