Vorhandensein und exakte Werte
Lektion 12 von 15 im Kurs CSS Selectors von Coddy.
In dieser Lektion lernen Sie Selektoren für das Vorhandensein von Attributen und für exakte Attributwerte kennen. Attributselektoren werden verwendet, um Elemente basierend auf dem Vorhandensein oder Fehlen eines Attributs oder dem exakten Wert eines Attributs auszuwählen.
Selektor für das Vorhandensein von Attributen:
Der Selektor für das Vorhandensein von Attributen zielt auf Elemente ab, die ein bestimmtes Attribut besitzen, unabhängig von dessen Wert. Er wird durch eckige Klammern mit dem Attributnamen darin gekennzeichnet.
Beispiel:
/* Wählt alle Elemente mit einem "target"-Attribut aus */
[target] {
color: blue;
}Selektor für exakte Werte:
Der Selektor für exakte Werte zielt auf Elemente mit einem bestimmten Attribut und einem bestimmten Attributwert ab. Er wird durch eckige Klammern mit dem Attributnamen, gefolgt von einem Gleichheitszeichen und dem gewünschten Wert darin, gekennzeichnet.
Beispiel:
/* Wählt das Element mit dem Attribut "data-type" aus, das den Wert "important" hat */
[data-type="important"] {
font-weight: bold;
}Code-Beispiele:
HTML:
<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>CSS:
[target] {
text-decoration: underline;
}
[data-type="important"] {
color: red;
}Diese Beispiele zeigen, wie CSS-Attributselektoren funktionieren, indem sie Elemente basierend auf dem Vorhandensein oder dem exakten Wert ihrer Attribute auswählen und entsprechende Stile auf sie anwenden.
Aufgabe
EinfachSie wurden damit beauftragt, ein einfaches HTML-Formular mithilfe von Attributselektoren zu gestalten.
Wenden Sie die folgenden Stile mithilfe von Attributselektoren an:
- Fügen Sie Eingabefeldern, bei denen das Attribut
typeauf "text" gesetzt ist, einengreenRahmen hinzu. - Ändern Sie die Hintergrundfarbe von Eingabefeldern, bei denen das Attribut
typeauf "email" gesetzt ist, inlightblue. - Ändern Sie die Textfarbe von Eingabefeldern, bei denen das Attribut
typeauf "password" gesetzt ist, inred.
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
/* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
Alle Lektionen in CSS Selectors
4Attributselektoren
Einführung in AttributselektorenVorhandensein und exakte WerteAttributwert-SelektorenAttributwert-Selektoren IIAttributwert-Selektoren III