ID选择器

ID选择器（ID Selector）是CSS中用于选择特定元素的选择器，通过HTML元素的id属性来选择唯一的元素。

基本语法

ID选择器的语法是使用#符号后跟元素的ID值：

#id-value {
  property: value;
}

工作原理

ID选择器会匹配HTML文档中具有指定id属性值的唯一元素。在HTML中，每个元素的ID值应该是唯一的，这意味着ID选择器只会匹配一个元素。

使用示例

示例1：为特定元素设置样式

<div id="header">这是页面头部</div>

#header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

这段CSS会选择ID为header的div元素，并为它设置背景颜色、文本颜色、内边距和文本对齐方式。

示例2：为表单元素设置样式

<form>
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
</form>

#username {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#password {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
}

这段CSS会分别选择ID为username和password的输入框，并为它们设置样式。

示例3：结合其他选择器使用

<h1 id="page-title">页面标题</h1>

h1#page-title {
  color: #ff6b6b;
  font-size: 36px;
  text-transform: uppercase;
}

这段CSS会选择ID为page-title的h1元素，这种写法比单独使用ID选择器更具特异性。

特点

1. 唯一性：一个ID在HTML文档中应该只出现一次
2. 高优先级：在CSS选择器优先级中，ID选择器的优先级较高（高于类选择器和元素选择器）
3. 精确选择：可以精确地选择页面中的特定元素

注意事项

1. 唯一性原则：在HTML文档中，每个ID值只能出现一次，这是HTML规范的要求
2. 命名规范：ID名应该具有描述性，使用小写字母和连字符（如main-content），避免使用数字开头
3. 避免过度使用：由于ID选择器的高优先级，过度使用会导致样式难以维护，建议优先使用类选择器
4. JavaScript交互：ID选择器常用于JavaScript选择DOM元素（如document.getElementById()）

浏览器兼容性

ID选择器是CSS1规范中定义的选择器，所有现代浏览器都完全支持。

相关资源

• MDN Web Docs - ID选择器
• W3Schools - CSS ID选择器

学习建议

ID选择器适合用于选择页面中唯一的元素（如页面头部、导航栏、页脚等）。在实际项目中，建议优先使用类选择器来定义可复用的样式，仅在需要选择唯一元素时使用ID选择器。同时，ID选择器也常用于JavaScript与DOM元素的交互。