ID 选择器

CSS 的**ID 选择器**根据元素的id属性的值匹配元素。为了选择元素，其id属性必须完全匹配选择器中给定的值。

css
/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

语法

css
#id_value { style properties }

请注意，从语法上讲（但不是从特异性方面），这等效于以下属性选择器

css
[id=id_value] { style properties }

id_value值必须是有效的CSS 标识符。不是有效 CSS 标识符的 HTML id属性必须在用作 ID 选择器之前进行转义。

示例

有效的 ID 选择器

HTML

html
<p id="blue">This paragraph has a blue background.</p>
<p>This is just a regular paragraph.</p>
html
<!-- 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

css
#blue {
  background-color: skyblue;
}
css
/* In the next two rules, the id attributes must be escaped */

#item\?one {
  background-color: pink;
}

#\00003123item {
  background-color: yellow;
}

结果

无效的 ID 选择器

以下规则中的 ID 选择器不是有效的 CSS 标识符，将被忽略。

css
#item?one {
  background-color: green;
}

#123item {
  background-color: green;
}

规范

规范
选择器级别 4
# id-selectors

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅