学习

ID 选择器

2026-02-23/0/ 编辑

ID 选择器

什么是 ID 选择器

ID 选择器使用 HTML 元素的 id 属性值作为选择器,选择具有特定 ID 的元素。

语法

#id值 {
  属性名1: 属性值1;
  属性名2: 属性值2;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ID 选择器</title>
  <style>
    #header {
      background-color: #333;
      color: #fff;
      padding: 20px;
    }

    #main-content {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    #footer {
      text-align: center;
      padding: 10px;
      border-top: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div id="header">
    <h1>网站标题</h1>
  </div>

  <div id="main-content">
    <p>主要内容区域</p>
  </div>

  <div id="footer">
    <p>页脚信息</p>
  </div>
</body>
</html>

特点

1. ID 必须唯一

在同一个 HTML 文档中,ID 值必须唯一,不能重复。

<!-- 正确 -->
<div id="header">头部</div>
<div id="content">内容</div>

<!-- 错误: ID 重复 -->
<div id="box">盒子1</div>
<div id="box">盒子2</div>

2. 选择唯一元素

ID 选择器只会选择一个元素(第一个匹配的元素)。

<style>
  #box {
    color: red;
  }
</style>
<div id="box">红色文字</div>
<div id="box">不受影响</div>

3. 优先级较高

ID 选择器的优先级比类选择器和标签选择器高。

<style>
  #my-box {
    color: red;  /* 生效 */
  }

  .text-blue {
    color: blue;  /* 被覆盖 */
  }

  div {
    color: green;  /* 被覆盖 */
  }
</style>
<div id="my-box" class="text-blue">红色文字</div>

命名规则

1. 以字母开头

/* 正确 */
#header { }
#mainContent { }
#box1 { }

/* 错误: 不能以数字开头 */
#1box { }

2. 只能包含字母、数字、下划线、连字符

/* 正确 */
#my-id { }
#my_id { }
#myId { }

/* 错误: 包含特殊字符 */
#my@id { }
#my!id { }
#my id { }  /* 空格 */

3. 区分大小写

#header { }  /* 与 #Header 不同 */
#Header { }

4. 不能使用 CSS 关键字

/* 错误 */
#hover { }
#focus { }
#active { }

常见命名方式

驼峰命名法

<div id="mainContent">内容</div>

#mainContent {
  padding: 20px;
}

连字符命名法(推荐)

<div id="main-content">内容</div>

#main-content {
  padding: 20px;
}

实际应用

应用1: 页面布局

<style>
  #header {
    height: 60px;
    background-color: #333;
  }

  #nav {
    height: 40px;
    background-color: #444;
  }

  #main {
    min-height: 400px;
  }

  #footer {
    height: 50px;
    background-color: #333;
  }
</style>
<body>
  <div id="header"></div>
  <div id="nav"></div>
  <div id="main"></div>
  <div id="footer"></div>
</body>

应用2: 单一组件

<style>
  #login-form {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
</style>
<form id="login-form">
  <!-- 表单内容 -->
</form>

应用3: 锚点定位

<style>
  #section1, #section2, #section3 {
    height: 500px;
    border: 1px solid #ddd;
    margin-top: 20px;
  }
</style>
<body>
  <a href="#section1">跳转到区域1</a>
  <a href="#section2">跳转到区域2</a>
  <a href="#section3">跳转到区域3</a>

  <div id="section1">区域1</div>
  <div id="section2">区域2</div>
  <div id="section3">区域3</div>
</body>

与类选择器的区别

特性	ID 选择器	类选择器
语法	`#id`	`.class`
唯一性	必须唯一	可以重复
使用次数	同一页面只能用一次	可以多次使用
优先级	较高	中等
适用场景	页面布局、唯一组件	样式复用

<!-- ID 选择器: 用于唯一元素 -->
<div id="header">头部</div>
<div id="footer">页脚</div>

<!-- 类选择器: 用于可复用样式 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>

优先级

/* 优先级: ID 选择器 > 类选择器 > 标签选择器 */

#box {           /* 优先级: 100 */
  color: red;
}

.box {           /* 优先级: 10 */
  color: blue;
}

div {            /* 优先级: 1 */
  color: green;
}

<div id="box" class="box">
  显示红色(#box 生效)
</div>

优缺点

优点

优先级高: 容易覆盖其他样式
语义明确: ID 通常表示页面的重要结构
锚点定位: 可以作为页面内跳转的锚点

缺点

不可复用: ID 必须唯一,不能复用
优先级过高: 可能导致样式难以覆盖
JavaScript 冲突: ID 也用于 JavaScript 选择元素

最佳实践

1. 用于页面布局结构

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>

2. 用于唯一的页面元素

<div id="login-box"></div>
<div id="search-box"></div>

3. 避免用于样式复用

<!-- 不推荐 -->
<div id="text-red">红色文字</div>
<div id="text-red">红色文字</div>  <!-- ID 重复 -->

<!-- 推荐 -->
<div class="text-red">红色文字</div>
<div class="text-red">红色文字</div>

4. 优先使用类选择器

<!-- 推荐: 使用类选择器 -->
<div class="card">卡片</div>

<!-- 仅在必要时使用 ID 选择器 -->
<div id="main-container">
  <div class="card">卡片</div>
</div>

注意事项

1. 不要滥用 ID 选择器

/* 不推荐 */
#box1 { margin: 10px; }
#box2 { margin: 10px; }
#box3 { margin: 10px; }

/* 推荐 */
.box { margin: 10px; }

2. ID 选择器优先级过高

/* 覆盖 ID 选择器的样式需要使用 !important 或更具体的选择器 */
#box {
  color: red;
}

/* 覆盖方式1: !important */
#box {
  color: blue !important;
}

/* 覆盖方式2: 更具体的选择器 */
body #box {
  color: blue;
}

3. 避免 ID 选择器和 JavaScript 冲突

<!-- ID 同时用于 CSS 和 JavaScript -->
<div id="button">按钮</div>

<script>
  const button = document.getElementById('button');
  button.addEventListener('click', function() {
    // ...
  });
</script>

学习要点

语法: #id值 { 属性: 值; }
唯一性: ID 必须唯一,不能重复
优先级: 较高,比类选择器和标签选择器高
命名规则: 以字母开头,只包含字母、数字、下划线、连字符
适用场景: 页面布局、唯一元素、锚点定位
推荐: 优先使用类选择器,ID 选择器仅用于页面结构

css css学习