Datenattributwerte können in CSS verwendet werden, um bestimmte Stile auf Elementen anzuwenden, basierend auf den Werten dieser Attribute.
Zum Beispiel könnten Sie ein Datenattribut namens “data-color” haben, das verschiedene Werte wie “rot”, “blau” und “grün” haben könnte. Sie könnten dann den Wert dieses Datenattributs verwenden, um die Textfarbe des Elements zu ändern.
Hier ist, wie Sie das tun könnten:
```css
[data-color=“red”] {
color: red;
}
[data-color=“blue”] {
color: blue;
}
[data-color=“green”] {
color: green;
}
```
In diesem Fall würde ein Element mit `data-color=“red”` in roter Farbe erscheinen, ein Element mit `data-color=“blue”` würde in blauer Farbe erscheinen, und so weiter.
Es ist auch möglich, das Attribut in Kombination mit anderen Selektoren zu verwenden, wie zum Beispiel dem Klassenselektor:
```css
.button[data-color=“red”] {
background-color: red;
}
.button[data-color=“blue”] {
background-color: blue;
}
.button[data-color=“green”] {
background-color: green;
}
```
In diesem Fall würde ein Element mit der Klasse “button” und `data-color=“red”` einen roten Hintergrund haben, ein Element mit der Klasse “button” und `data-color=“blue”` einen blauen Hintergrund, und so weiter.
