CSS ID 选择器

Begindev 编辑部 March 25, 2026

ID 选择器是 CSS 中的一个强大工具，允许你将唯一的样式应用于网页上的特定 HTML 元素。

与可以用于设置多个元素样式的类选择器不同，ID 选择器一次只能针对一个元素。这使得它们非常适合设置那些真正独特的元素样式，例如网站的页眉、页脚或特定的特色部分。当与其他选择器类型结合使用时，它们有助于构建 CSS 的整体结构和可读性。

1. 理解 ID 选择器

ID 选择器使用 井号 (#) 后跟 ID 名称来定位特定的 HTML 元素。ID 名称在 HTML 文档中必须是唯一的。这种唯一性是区分 ID 选择器和类选择器的关键。

1.1 语法和用法

ID 选择器的基本语法如下：

#idName {
  property: value;
  /* 更多 CSS 声明 */
}

这是一个如何使用 ID 选择器的例子：

HTML:

<div id="main-header">
  <h1>欢迎来到我的网站</h1>
</div>

CSS:

#main-header {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

在这个例子中，CSS 规则将仅应用于 ID 为 main-header 的 div 元素。

2. 优先级 (Specificity)

优先级是 CSS 中的一个关键概念，它决定了当多个规则针对同一个元素时，应用哪条 CSS 规则。

ID 选择器的优先级高于类选择器和元素选择器。 这意味着如果一个 ID 选择器和一个类选择器都针对同一个元素的同一个属性，由 ID 选择器定义的规则将优先应用。

这是一个说明优先级的例子：

HTML:

<div id="unique-element" class="my-class">
  这是一个独特的元素。
</div>

CSS:

#unique-element {
  color: blue;
}
.my-class {
  color: red;
}
div {
  color: green;
}

在这种情况下，div 的文本颜色将是蓝色。因为 ID 选择器 #unique-element 的优先级高于类选择器 .my-class 和元素选择器 div。

3. 何时使用 ID 选择器

ID 选择器最适合用于设置页面上只出现一次的元素的样式，例如：

主页眉 (Main Header) 或页脚 (Footer)
主导航栏 (Primary Navigation Bar)
唯一的横幅 (Banner) 或促销部分
特定的表单或搜索栏

对这些元素使用 ID 选择器有助于确保样式被正确且一致地应用。

4. 何时避免使用 ID 选择器

虽然 ID 选择器很有用，但也应避免过度使用。以下情况应考虑使用替代选择器（如类选择器）：

当需要将相同样式应用于多个元素时：请改用类选择器。
当设置基本 HTML 元素样式时：元素选择器或组合选择器可能更合适。
当创建可复用组件时：类通常更适合可复用组件，因为 ID 本意是唯一的，不能在同一页面重复使用。

5. 实战示例与演示

让我们探索一些实际示例，演示如何在不同场景中使用 ID 选择器。

5.1 示例 1：设置唯一导航栏的样式

假设你有一个导航栏，你想让它的样式与网站上的其他导航元素不同。

HTML:

<nav id="main-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

CSS:

#main-nav {
  background-color: #333;
  color: white;
  padding: 10px;
}
#main-nav ul {
  list-style-type: none; /* 移除列表项标记 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#main-nav li {
  float: left; /* 让列表项水平排列 */
}
#main-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#main-nav li a:hover {
  background-color: #ddd;
  color: black;
}

在此示例中，ID 选择器 #main-nav 用于定位唯一的导航栏，确保这些样式仅应用于此特定元素。

5.2 示例 2：设置特定表单的样式

假设你有一个联系表单，你想让它的样式与网站上的其他表单不同。

HTML:

<form id="contact-form">
  <label for="name">姓名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">邮箱：</label><br>
  <input type="email" id="email" name="email"><br><br>
  
  <label for="message">留言：</label><br>
  <textarea id="message" name="message"></textarea><br><br>
  
  <input type="submit" value="提交">
</form>

CSS:

#contact-form {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}
#contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 确保内边距和边框包含在总宽度中，防止布局问题 */
}
#contact-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
#contact-form input[type="submit"]:hover {
  background-color: #3e8e41;
}

这里使用 ID 选择器 #contact-form 来设置联系表单的样式。我们还结合了 ID 选择器和属性选择器来设置表单内不同输入类型的样式。

5.3 示例 3：高亮显示特色部分

假设你的主页上有一个特色部分，你希望它脱颖而出。

HTML:

<section id="featured-section">
  <h2>精选文章</h2>
  <p>这是我们要重点推荐的精选文章。</p>
  <a href="#">阅读更多</a>
</section>

CSS:

#featured-section {
  background-color: #e9ecef;
  padding: 20px;
  border: 1px solid #dee2e6;
  text-align: center;
}
#featured-section h2 {
  color: #007bff;
}
#featured-section a {
  color: #007bff;
  text-decoration: none;
}
#featured-section a:hover {
  text-decoration: underline;
}

在这个例子中，ID 选择器 #featured-section 用于设置特色部分的样式，使其在视觉上与页面上的其他部分区分开来。