CSS-Kurs / Grundlegende Selektoren: Typ, Klasse, ID und Attribute

CSS-Selektoren identifizieren die HTML-Elemente, auf die eine Regel angewendet wird. Typ-Selektoren passen zu Tag-Namen, Klassen-Selektoren passen zu wiederverwendbaren Bezeichnungen, ID-Selektoren passen zu einem Bezeichner und Attribut-Selektoren passen zu Attributen oder deren Werten.

Vergleichen Sie Selektoren mit denselben HTML-Elementen

Lassen Sie uns den Selektor basierend auf den folgenden vier Elementen lesen: A und B sind p und haben die Klasse notice, und B hat außerdem die Klasse urgent. C ist ein p ohne Klasse, D ist ein div mit der Klasse notice. Die englischen Buchstaben A~D sind nur Markierungen, um Objekte in der Beschreibung zu unterscheiden, und sind keine CSS-Syntax.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Beim Lesen eines Selektors stellen Sie sicher, dass die Bedingung auf dem Element selbst liegt, auf das das CSS angewendet wird. Die beiden Bedingungen in p.notice beziehen sich auf dasselbe Element. Andererseits bedeutet das Leerzeichen in p .notice, ein anderes Element in p zu finden. Regeln, die das Ziel je nach Leerzeichen ändern, können zusammen mit der Struktur in den CSS-Kombinatoren und Pseudo-Klassen gefunden werden.

Verwenden Sie Typ- und universelle Selektoren

p { color: #333; }
* { box-sizing: border-box; }

p wählt alle p-Elemente aus. Es ist einfach, dasselbe Tag allgemein zu gestalten, aber um die Benachrichtigungs- und Absatzabschnitte separat zu gestalten, sind zusätzliche Bedingungen wie Klassen erforderlich. Der universelle Selektor * ist eine Schreibweise, die alle Elemente auswählt. Er schließt Pseudo-Elemente nicht automatisch ein.

Hier ist box-sizing: border-box eine Hilfseinstellung, die das Padding und den Rand bei der Angabe von Breite und Höhe mitberechnet. Sie können diese Übung machen, auch wenn Sie die Feinheiten der Größenberechnung noch nicht gelernt haben. Die Verwendung eines universellen Selektors bedeutet nicht, dass Sie alle Textfarben und Hintergründe gleichzeitig ändern müssen. Denken Sie über das Design allgemeiner Einstellungen und spezifischer Elemente nach.

Wählen Sie Klassen und IDs aus

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Eine Klasse kann für mehrere Elemente wiederverwendet werden. class="notice urgent" in HTML ist eine Liste von zwei Klassennamen mit Leerzeichen, nicht ein einzelner Name notice urgent. In CSS fügt man einen Punkt davor ein, um .notice oder .urgent auszuwählen. .notice.urgent gilt nur für Elemente mit beiden Namen.

Eine ID muss innerhalb eines HTML-Dokuments eindeutig sein. Verwenden Sie nicht bei zehn Hinweisen dasselbe id="opening". Verwenden Sie Klassen für wiederverwendbare Styles und IDs für eindeutige Identifikation oder Fragmentziele. ID-Selektoren haben eine höhere Spezifität als Klassen-Selektoren, aber die Spezifität wird innerhalb der anwendbaren Herkunfts-, Wichtigkeits- und Schichtenbedingungen verglichen; das willkürliche Hinzufügen von IDs macht Konflikte schwieriger zu verwalten. Für weitere Details siehe Vererbung, Spezifität und Kaskade.

Im Beispiel färben wir nach ID, um Unterschiede zwischen den Subjekten zu zeigen. Wenn Sie tatsächlich die gleiche grüne Farbe für mehrere Hinweise benötigen, können Sie dies vereinfachen, indem Sie die Farbe zur .notice-Regel hinzufügen. Das Ziel ist nicht, möglichst viele Selektorarten einzusetzen, sondern nur den Bereich auszuwählen, den Sie benötigen.

Gleichen Sie Attribute und ihre Werte ab

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Eine https://-Adresse kann auf dieselbe Seite zeigen, daher identifiziert dieses Präfix allein keine externen Links. Ebenso stimmt [data-tags="visit"] mit dem gesamten Attributwert überein und stimmt nicht mit garden visit überein. Verwenden Sie den entsprechenden Vergleichsoperator für die beabsichtigte Bedingung. Siehe MDN: Attributselektoren.

Führen Sie das vollständige Selektorbeispiel aus

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Wenn Sie speichern und mit index.html öffnen, haben A·B·D einen hellen Hintergrund und 12px Padding, und nur A·B, die p.notice entsprechen, haben eine linke Rahmenlinie. B hat beide Klassen und sieht fett aus. A hat die ID opening und erhält dadurch grüne Schrift, und aufgrund des visit-Attributwerts wird auch eine gestrichelte Umrandung erstellt. C bleibt ein normaler Absatz.

Der Rand des E-Mail-Eingabefelds wird unter der erforderlichen Bedingung dick, und der Hintergrund wird unter der Typbedingung gelb. Die tatsächliche Eingabevalidierungsfunktion von 'required' wird durch das HTML-Attribut gehandhabt, und CSS ändert nur das Erscheinungsbild des Eingabefelds. Die externe Linkadresse im Beispiel dient nur zur Veranschaulichung. Bitte verwenden Sie diesen nicht als Leitlink zum tatsächlichen Dienst. Die Methode zur Auswahl der Existenz eines Attributs unterscheidet sich von der Methode zur Auswahl des Überprüfungsergebnisses. Formularzustände: Fokus, Validierung, disabled und readonly vergleicht Selector von 'required' und Fehlerzustand zusammen.

Ändern Sie Bedingungen und sagen Sie das Ergebnis voraus

1. Versuchen Sie, p.notice in .notice zu ändern, um das Ziel des linken Rahmens zu erweitern. Das erwartete Ergebnis ist, dass der Rahmen, der ursprünglich nur in A·B vorhanden war, nun auch in D erscheint. Nach der Bestätigung die ursprüngliche Auswahl wiederherstellen.
2. Ändern Sie die Klasse von B zu class="urgent". B ist immer noch p, verliert jedoch die Hinweisbedingung, sodass der Leitfaden-Hintergrund, der linke Rahmen und der Fetttext für .notice.urgent verschwinden. Komplexe Selektoren stimmen nicht einfach wegen der Klasse urgent überein.
3. Ändern Sie den Daten-Tags-Wert von A zu garden revisit. Da visit nicht mehr als eigenständiges Wort vorkommt, verschwindet die gestrichelte Umrandung. ~= prüft Wörter und keine beliebigen Teilzeichenfolgen; revisit enthält zwar die Zeichen visit, ist aber ein anderes Wort.

Für jede Übung speichern Sie die Datei und laden Sie die Seite neu, prüfen Sie das Ergebnis und stellen Sie anschließend die ursprünglichen Werte wieder her. Wenn sich nur das erwartete Objekt nicht ändert, vergleichen Sie zuerst den tatsächlichen Klassennamen·ID·Eigenschaftsnamen. Sie können zwischen Auswahlfehlern und Prioritätskonflikten unterscheiden, indem Sie in den Entwicklertools nachsehen, ob die Regeln zu den ausgewählten Elementen passen.