CSS ID 选择器 ID selectors

Docs

ID 选择器 - CSS | MDN (mozilla.org)

ID 选择器 ID selector：按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

• 语法：#idname
• 例子：#toc 匹配 ID 为 "toc" 的元素。

ID 选择器 ID selector

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

在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

语法：#id 属性值 { 样式声明 }

它与 属性选择器 语句等价：[id=id 属性值] { 样式声明 }

id 注意事项

一个 HTML 文档里面的 id 值唯一的，不能重复

• id 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识。(中划线又叫连字符（hyphen）)
• 最好不要用标签名作为 id 值

HTML

<div id="identified-skyblue">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

CSS

#identified-skyblue {
  background-color: skyblue;
}

http://localhost:3000/css-id-selectors.html

This div has a special ID on it!

This is just a regular div.