CSS 类选择器和 ID 选择器（.class 和 #id）

类选择器

类选择器是一个点后面跟上类名。只要元素的 class 属性中包含这个类名，无论是什么元素，都会应用这条样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

点只出现在 CSS 中。在 HTML 中，属性写作 class="badge"，不带点。类名区分大小写：.Badge 不会匹配 class="badge"。

一个元素上的多个类

一个元素可以带任意多个类，用空格分隔。每个类带来各自的规则，用小块组合出不同的变体就是这样做的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

不带空格的 .btn.danger 匹配同时带有这两个类的元素。最后一个 span 有 danger 但没有 btn，所以链式规则会跳过它。

类选择器的各种写法

有空格和没有空格的区别，以及更多组合器，见 CSS 选择器页面。

ID 选择器

ID 选择器是一个井号后面跟上 id：#site-header 为带 id="site-header" 的元素设置样式。id 在页面中必须唯一，所以 ID 选择器只会选中一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

id 的用途不只是样式：href="#details" 会滚动到这个元素，<label for="email"> 指向输入框的 id，JavaScript 用 document.getElementById('details') 找到它。这些才是给元素加 id 的常见理由；至于样式，类是更好的工具。

class 与 id 的区别

优先级上的差距，正是实际开发中用类来写样式的原因。一个 ID 胜过任意多个类，所以用 ID 写的规则只能被另一个 ID、行内样式或 !important 覆盖：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

用 JavaScript 添加和移除类

用类来改变元素的外观是 JavaScript 的常规做法：CSS 定义各种状态，脚本只负责切换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList 还有 add、remove、contains 和 replace。避免直接给 className 赋值：它会替换掉元素原有的所有类。

类的命名

• 字母、数字、连字符和下划线都可以放心使用：card、card-title、card__title、is-open。
• 选择器不要以数字开头，也不要以连字符加数字开头。.2col 是无效的 CSS。用字母开头（.cols-2），或者转义这个数字（.\32 col）。
• 按用途命名，而不是按外观命名：.error 在改版后依然适用，.red-text 就不行了。
• 在较大的项目中，命名规范很有帮助。BEM 的写法是 block__element--modifier，例如 .card__title--large。

常见错误

• 在 HTML 中写了点。 class=".badge" 永远不会匹配 .badge。
• 写了两个 class 属性。 <p class="a" class="b"> 只保留 a。请写成 class="a b"。
• 想选同时带两个类的元素，却加了空格。 .btn .primary 查找的是嵌套的元素；.btn.primary 才是同一个元素。
• 重复使用 id。 重复的 id 会破坏 getElementById、锚点链接和 label 的关联，即使 CSS 看起来正常。
• 所有样式都用 id 写。 它的优先级会让之后的覆盖变得很麻烦；请用类。