ID-Selektoren
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der CSS ID-Selektor wählt ein Element basierend auf dem Wert des id-Attributs des Elements aus. Damit das Element ausgewählt wird, muss sein id-Attribut genau mit dem im Selektor angegebenen Wert übereinstimmen.
/* The element with id="demo" */ #demo { border: red 2px solid; } Syntax
#id_value { /* … */ } Beachten Sie, dass dies syntaktisch (aber nicht im Hinblick auf die Spezifität) dem folgenden Attributselektor entspricht:
[id="id_value"] { /* … */ } Der id_value-Wert muss ein gültiger CSS-Bezeichner sein. HTML-id-Attribute, die keine gültigen CSS-Bezeichner sind, müssen escapet werden, bevor sie in ID-Selektoren verwendet werden können.
Beispiele
Gültige ID-Selektoren
HTML
<p id="blue">This paragraph has a blue background.</p> <p>This is just a regular paragraph.</p> <!-- The next two paragraphs have id attributes that contain characters which must be escaped in CSS --> <p id="item?one">This paragraph has a pink background.</p> <p id="123item">This paragraph has a yellow background.</p> CSS
#blue { background-color: skyblue; } /* In the next two rules, the id attributes must be escaped */ #item\?one { background-color: pink; } #\00003123item { background-color: yellow; } Ergebnis
Ungültige ID-Selektoren
Die ID-Selektoren in den folgenden Regeln sind keine gültigen CSS-Bezeichner und werden ignoriert.
#item?one { background-color: green; } #123item { background-color: green; } Spezifikationen
| Specification |
|---|
| Selectors Level 4 # id-selectors |
Browser-Kompatibilität
Loading…