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

So leiten Sie eine URL mit Nginx Rewrite um

Ich muss in letzter Zeit bei der Arbeit oft die N...

So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen

Mysqldump wird für logische Backups in MySQL verw...

Keep-Alive-Multilevel-Routing-Cache-Problem in Vue

Inhaltsverzeichnis 1. Problembeschreibung 2. Ursa...

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-E...

Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

Im Webdesign hört man oft die Eigenschaftsnamen „...

Eine kurze Diskussion über den JavaScript-Bereich

Inhaltsverzeichnis 1. Geltungsbereich 1. Globaler...

Detaillierte Erläuterung des MySQL-Clusterindex und des Nicht-Clusterindex

1. Clustered-Index Tabellendaten werden in der Re...

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Container-Lebenszyklus Der Lebenszyklus einer Con...

Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

Zusammenfassung der Namenskonventionen für HTML und CSS

CSS-Benennungsregeln Header: Header Inhalt: Inhalt...

So installieren Sie Docker mithilfe von Skripten unter Linux Centos

Was ist die Hauptfunktion von Docker? Derzeit gib...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...

CSS realisiert die Szenenanalyse von halbtransparenten Rändern und Mehrfachrändern

Szenario 1: So erzielen Sie einen halbtransparent...

Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker

Dieser Artikel listet die am häufigsten verwendet...

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Inhaltsverzeichnis Versteckte Probleme Lösung zur...