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 July 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 exakt mit dem im Selektor angegebenen Wert übereinstimmen.
/* The element with id="demo" */
#demo {
border: red 2px solid;
}
Syntax
#id_value { style properties }
Beachten Sie, dass dies syntaktisch (aber nicht hinsichtlich der Spezifität) dem folgenden Attributselektor entspricht:
[id=id_value] { style properties }
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
BCD tables only load in the browser