Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern

Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern
Dank unserer umfassenden CSS-Erfahrung als Webdesigner merken wir uns alle Arten von Codesyntax, Kompatibilität und Snippets. Es gibt bestimmte CSS, die das Design Ihrer Website wirklich verändern können. Ältere technische Regeln und Deklarationen zu ändern und weniger Code zu verwenden, um den gleichen Effekt zu erzielen, ist unser ständiges Streben nach diesem Ziel. Hier sind 5 CSS-Selektoren, die Ihnen helfen, Ihre XHTML-Seiten übersichtlicher zu halten.
1. Unterklassen zuordnen <br />Beim Entwerfen von Menüs müssen Sie manchmal Elemente mit mehreren Klassen auswählen, z. B. alle Elemente von „Element“ und „Aktiv“ auswählen:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
<Stil>
/* Stile hier */
</Stil>
</Kopf>
<Text>
<ul Klasse="Liste">
<li class="item">Artikel 1</li>
<li class="item active">aktives Element 2</li>
<li class="active">Element 3</li>
</ul>
</body>
</html>

Die typische Lösung besteht darin, ein übergeordnetes Element zu verwenden, zum Beispiel:
.list .item {color: #ccc;} /* Alle Elemente mit Klasse 'item' */
.list .active {text-decoration: underline;} /* *Alle Elemente mit Klasse „item“ und „active“**/
Was aber, wenn Sie Elemente mit der Klasse „active“ ausschließen müssen, „item“ jedoch unverändert lassen müssen? Hier ist der Teilmengen-Matching-Selektorcode:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
<Stil>
.item {color: #ccc;} /* alle Elemente mit der Klasse „item“ */
.item.active {text-decoration: underline;} /* alle Elemente mit der Klasse „item“ und „active“ */
</Stil>
</Kopf>
<Text>
<ul>
<li class="item">.item CSS-Selektor angewendet</li>
<li class="item active">.item und .item.active CSS-Selektoren angewendet </li>
<li class="item active someOneMoreClass">.item und .item.active CSS-Selektoren ebenfalls angewendet</li>
<li class="active">keine CSS-Selektoren angewendet</li>
</ul>
</body>
</html>

Browserunterstützung: Firefox, Chrome, Safari, IE 7 und höher
2. Attributauswahl <br />Manchmal müssen Sie einen bestimmten Attributwert eines Elements zuordnen. Der häufigste Fall ist für mich beispielsweise die Übermittlung eines Formulars. Alle Texteingabeelemente haben einen Stil und die Übermittlungsschaltfläche hat einen anderen Stil. Am häufigsten sehe ich dieses Problem, indem ich einen anderen Stil für die Eingaben definiere, wie im folgenden Beispiel:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
<Stil>
Bezeichnung {Anzeige: Block; Farbe: #444;}
input.text {border: 1px solid #ccc; color: #333; padding: 3px;} //Definiere eine andere Klasse für das Textfeld
input.submit {color: #333; border: 1px solid #333; background-color: #eee;} //Definiere eine Klasse für die Schaltfläche „Senden“.
</Stil>
</Kopf>
<Text>
<form>
<label for="login">Anmelden</label>
<input class="text" type="text" name="anmelden" id="anmelden" value="" />
<label for="login">Passwort</label>
<input class="text" type="password" name="password" id="password" value="" />

<input class="submit" type="submit" value="Push mich" />
</form>
</body>
</html>

Was oben steht, ist zwar richtig, aber ich habe eine Lösung, ohne zusätzliche Klassen zu definieren. Für dieses Problem werde ich Attributselektoren verwenden:

Code kopieren
Der Code lautet wie folgt:

/* Stimmt mit jedem Element überein, bei dem das Attribut „Name“ gesetzt ist (beliebiger Wert) */
a[Name] { ... Stile ..}
/* Stimmt mit jedem INPUT-Element überein, dessen Attribut „type“ den Wert „text“ hat */
Eingabe[Typ="Text"] { ... Stile ..}
/* entspricht jedem DIV-Element, dessen Attributwert „myattribute“ eine durch Leerzeichen getrennte Liste von Werten ist, von denen einer genau „value3“ entspricht.
zB <div meinattribute="Wert1 Wert2 Wert3 Wert4"> */
div[meinAttribut~="Wert3"] { ... Stile ..}
/* Stimmt mit jedem DIV-Element überein, dessen „myattribute“-Attribut einen durch Bindestrich getrennten Wert hat.
zB <div meinattribut="Wert1-Wert2-Wert3-Wert4"> */
div[meinAttribut~="Wert2"] { ... Stile ..}

Mit diesen Regeln können Sie den Code wie folgt schreiben

Code kopieren
Der Code lautet wie folgt:

<Stil>
Bezeichnung {Anzeige: Block; Farbe: #444;}
/* alle Text- und Passworteingaben */
Eingabe [Typ = "Text"], Eingabe [Typ = "Passwort"] {Rand: 1px durchgehend #ccc; Farbe: #333; Polsterung: 3px;}
/* einfach die Schaltflächen zum Senden */
Eingabe [Typ = "Senden"] {Farbe: #333; Rahmen: 1px durchgezogen #333; Hintergrundfarbe: #eee;}
</Stil>
<form>
<label for="login">Anmelden</label>
<input Typ="Text" Name="Anmeldung" ID="Anmeldung" Wert="" />
<label for="password">Passwort</label>
<input type="Passwort" name="Passwort" id="Passwort" value="" />

<input type="submit" value="Push mich" />
</form>

Browserunterstützung: Firefox, Chrome, Safari, IE 7 und höher.
3. Benachbarte Selektoren <br />Ein weiteres Problem kann die Anwendung von Stilen auf Elemente auf derselben Ebene sein (z. B. wenn Sie den Mauszeiger über ein Element bewegen, um einen Menüeffekt anzuzeigen):

Code kopieren
Der Code lautet wie folgt:

/* Stimmt mit jedem Element vor einem Geschwisterelement mit der Klasse „aktiv“ überein * */
a.aktiv + a
/* Passt zu jedem Element nach einer „aktiven“ Klasse auf derselben Ebene**/
a + a.aktiv
/* ... und einige nützliche Tipps ... */
/* Stimmt mit allen li-Elementen außer dem letzten überein*/
li + li { .. Stil .. }
/* Entspricht dem ersten Element von A:hover*/
a:hover { /* Erster Stil: Hover-Element */ }
/* Stile außer dem ersten Hover-Element
*/
a + a:hover { .. Stile .. }

Es kann beispielsweise zum Gestalten von Menüs usw. verwendet werden.
Mit dem nebenstehenden Selektor geht es einfacher:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
<Stil>
.menu ein {
/*Menüelementstil*/
Rand: 1px durchgezogen #888;
Polsterung: 3px 10px;
Farbe: #333;
Hintergrundfarbe: #fff;
Textdekoration: keine;
Rand: 0;
schweben: links;
Z-Index: 1;
Position: relativ;
}
.menu a:hover {
Z-Index: 10000;
Position: relativ;
Polsterung: 8px 20px 8px 20px;
Hintergrundfarbe: #aed8fb;
Rahmen links: 1px durchgezogen #888;
Rand: -5px -10px 0 -10px;
}
.menu a + a:hover {
Rand rechts: -10px;
Rand links: -11px;
}
.menü a + a {
Rand links: keiner;
}
.Menü .Löschen {
Schwimmer: keiner;
klar: beides;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Menü">
<a href="#">Artikel 1</a>
<a href="#">Punkt 2</a>
<a href="#">Punkt 3</a>
<a href="#">Punkt 4</a>
<div Klasse="klar"></div>
</div>
</body>
</html>

Browserunterstützung: Firefox, Chrome, Safari, IE 7 und höher
4. Untergeordneter Selektor <br />Der untergeordnete Selektor gleicht Elemente ab, die untergeordnete Elemente anderer Elemente sind. Ein Unterselektor besteht aus zwei oder mehr Selektoren, die durch ">" getrennt sind.
/* Stimmt mit allen P-Elementen innerhalb eines DIV-Elements überein*/
div > p { .. slyles .. }
div ol>li p { .. Stile ..}
Wenn Sie alle Bilder in einem Absatz innerhalb eines Div mit Inhalt linksbündig ausrichten möchten, kann der folgende Code hilfreich sein:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Inhalt">
<p>Lorem lorem lorem <img src="/images.jpg" alt="dieses Bild sollte linksbündig ausgerichtet sein" /></p>
<p>Lorem lorem lorem <img src="/images.jpg" alt="dieses Bild sollte auch linksbündig ausgerichtet sein" /> Lorem lorem lorem </p>
<img src="/images.jpg" alt="Dieses Bild sollte auch nicht linksbündig ausgerichtet sein" />
</div>

Sie können Folgendes tun:
div.Inhalt p > img {float: left;}
Browserunterstützung: Firefox, Chrome, Safari, IE 7 und höher.
5. Allgemeine Auswahltipps <br />Zum Schluss noch ein paar nützliche Tipps. Wie Sie wissen, passt der universelle Selektor ("*") zu jedem Element und kann in Kombination mit anderen Selektoren an manchen Stellen nützlich sein.
Zum Beispiel:

Code kopieren
Der Code lautet wie folgt:

/* Stimmt mit allen Elementen überein, die ein „href“-Attribut haben */
*[href] { .. Stile ..}
/* Stimmt mit allen Elementen überein, deren Attribut „alt“ leer ist */
*[alt=""]
/* Stimmt mit allen P-Elementen überein, die Enkel (keine direkten Kinder) von DIV-Elementen sind */
div * p { .. Stile ..}

Browserunterstützung: Firefox, Chrome, Safari, IE 7 und höher.

<<:  Lernen Sie MySQL Index Pushdown in fünf Minuten

>>:  JavaScript-Flusskontrolle (Verzweigung)

Artikel empfehlen

5 Lösungen für den CSS-Box-Zusammenbruch

Zunächst: Was ist ein Box-Collapse? Elemente, die...

Implementierung eines Nginx-Load-Balancing-Clusters

(1) Experimentelle Umgebung youxi1 192.168.5.101 ...

jQuery-Plugin zur Implementierung des Suchverlaufs

Jeden Tag ein jQuery-Plugin – um einen Suchverlau...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 winx64

Das Tutorial zur Datenbankinstallation von MySQL-...

Einführung in die Verwendung von MySQL-Befehlen zum Erstellen, Löschen und Abfragen von Indizes

MySQL-Datenbanktabellen können Indizes erstellen,...

Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind

Hier sind einige Punkte, die Sie bei der Registri...

Linux 6 Schritte zum Ändern der Standard-Remote-Portnummer von SSH

Der Standard-SSH-Remote-Port in Linux ist 22. Man...

Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben

Guter HTML-Code ist die Grundlage einer schönen W...

So führen Sie ein Projekt mit Docker aus

1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

Methoden zum Defragmentieren und Freigeben von Speicherplatz in MySQL-Tabellen

Inhaltsverzeichnis Ursachen der MySQL-Tabellenfra...

Detaillierte Erklärung zum schnellen Erstellen einer Blog-Website mit Docker

Inhaltsverzeichnis 1. Vorbereitung 2. Bereitstell...

Verwenden Sie „overflow: hidden“, um Seiten-Bildlaufleisten zu deaktivieren

Code kopieren Der Code lautet wie folgt: html { Ü...

Detaillierte Erklärung der Anzeigemodi in CSS-Tags

Beschriftungsanzeigemodus (wichtig) Div- und Span...

Detaillierte Erläuterung der Verwendung von MySQL sql_mode

Inhaltsverzeichnis Vorwort sql_mode erklärt Die w...