Sicherer Umgang mit gängigen CSS-Attributselektoren

Um gängige CSS-Attributselektoren zu beherrschen, sind spezifische Codebeispiele erforderlich.

CSS ist eine Sprache, die zur Steuerung des Stils von Webseiten verwendet wird. Sie kann HTML-Elementen Stil und Layout hinzufügen. In CSS ist der Attributselektor ein sehr nützlicher Selektor, der das entsprechende Element anhand seines Attributwerts auswählen kann, um seinen Stil einfach zu ändern.

Im Folgenden werden einige häufig verwendete CSS-Attributselektoren vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Selector [Typ]: Wählen Sie Elemente basierend auf ihren Typattributen aus.

Schreiben Sie den folgenden CSS-Code, um die Hintergrundfarbe aller Schaltflächenelemente vom Typ „Button“ auf Rot zu setzen:

button[type="button"] {
  background-color: red;
}

2. Selector [Klasse]: Wählen Sie Elemente basierend auf ihrem Klassenattribut aus.

Schreiben Sie den folgenden CSS-Code, um die Textfarbe aller Elemente mit der Klasse „highlight“ auf Blau zu setzen:

.highlight {
  color: blue;
}

3. Selector [id]: Wählen Sie Elemente basierend auf ihrem ID-Attribut aus.

Schreiben Sie den folgenden CSS-Code, um die Hintergrundfarbe des Navigationsleistenelements mit der ID „navbar“ auf Grau zu setzen:

#navbar {
  background-color: gray;
}

4. Selector [attr~=value]: Wählt die Elemente mit dem angegebenen Attribut und dem Attributwert aus enthält ein bestimmtes Wortschatzelement.

Schreiben Sie den folgenden CSS-Code, um die Textfarbe für Elemente mit dem Attribut „lang“ und dem Attributwert, der „en“ enthält, auf Grün zu setzen:

[lang~="en"] {
  color: green;
}

5. Selector [attr^=value]: Wählt Elemente mit dem angegebenen Attribut aus und Elemente, deren Attributwerte mit einem bestimmten Wert beginnen.

Schreiben Sie den folgenden CSS-Code, um den Schriftstil für Elemente mit dem Attribut „data-“ und dem Attributwert, der mit „menu“ beginnt, auf Kursiv zu setzen:

[data^="menu"] {
  font-style: italic;
}

6. Selector [attr$=value]: Wählt Elemente mit dem aus angegebenes Attribut Elemente, deren Attributwerte mit einem bestimmten Wert enden.

Schreiben Sie den folgenden CSS-Code, um die Textfarbe von Linkelementen mit dem Attribut „href“ und dem Attributwert, der mit „.pdf“ endet, auf Rot zu setzen:

[href$=".pdf"] {
  color: red;
}

Dies sind häufig verwendete CSS-Attributselektoren, die schnell und genau sind Wählen Sie das angegebene Element aus und ändern Sie seinen Stil. Durch die flexible Verwendung dieser Selektoren können wir den Stil von Webseiten einfacher steuern.

Ich hoffe, dass der obige Inhalt Ihnen helfen kann, die Verwendung von CSS-Attributselektoren besser zu verstehen und zu beherrschen. Ich wünsche Ihnen bessere Ergebnisse bei der Verwendung von CSS!

Das obige ist der detaillierte Inhalt vonSicherer Umgang mit gängigen CSS-Attributselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!