HTML class 与 id

class 和 id 是 HTML 最重要的两个全局属性，用于给元素”贴上标签”，方便 CSS 和 JavaScript 选中它们。

class

  • 可以多个元素共用同一个 class
  • 一个元素可以有多个 class（用空格分隔）
  • 主要用于 CSS 样式
html 
<p class="highlight">这段话被高亮标记。</p>
<p class="highlight">这段话也被高亮标记。</p>

<div class="card featured large">
  这个 div 有三个 class：card、featured、large
</div>
css 
.highlight {
  background: yellow;
}
.card.featured {
  border-color: gold;
}

id

  • 一个页面中每个 id 值必须唯一
  • 一个元素最多有一个 id
  • 主要用于 JavaScript 定位或锚点跳转
html 
<h1 id="main-title">网站主标题</h1>
<section id="about">关于我们</section>

<a href="#about">跳转到关于我们</a>

关键区别

classid
唯一性可重复使用页面内唯一
每元素数量多个（空格分隔）一个
用途CSS 样式JS 定位 / 锚点

id 的 CSS 优先级极高，一旦用了 #id 写样式，后面很难用 class 覆盖。样式优先用 class，id 留给 JavaScript 和锚点。

命名规范

虽然没有硬性规定，但社区广泛采用以下惯例：

  • 全小写，单词之间用连字符分隔：.main-nav、.user-card
  • 命名应描述含义而非外观：.warning 而不是 .red-text
  • 避免过于泛泛的名称：.button 容易冲突，.btn-submit 更好
  • 常用命名方法论：BEM（Block Element Modifier）、SMACSS、OOCSS
css 
/* BEM 风格示例 */
.search-form           /* Block */
.search-form__input    /* Element */
.search-form--large    /* Modifier */