CSS 类选择器详解：从入门到实战

1. 引言

CSS（层叠样式表）是网页设计的核心语言，而选择器 则是 CSS 中最基础也最重要的概念。简单来说，选择器就是告诉浏览器"我要给页面上的哪些元素设置样式"的规则。

在众多选择器中，类选择器（class selector） 是日常开发中使用频率最高、最灵活的一种。它通过 HTML 元素的 class 属性来精准匹配元素，支持重复使用和组合复用，是每个前端开发者必须熟练掌握的核心技能。

本文将带你系统学习类选择器的语法、核心特性、命名规范，并通过大量可运行的代码示例，帮助你快速上手。

2. 什么是类选择器

类选择器 通过 HTML 元素的 class 属性来匹配元素，语法是在类名前加一个点 .。

css 复制代码

.类名 {
  属性: 值;
}

对应的 HTML 写法：

html 复制代码

<p class="highlight">这是一段高亮文字</p>

CSS 写法：

css 复制代码

.highlight {
  background-color: yellow;
  font-weight: bold;
}

这样，只有带有 class="highlight" 的元素才会应用这个样式。

3. 类选择器的核心特性

3.1 可重复使用

同一个类名可以被多个元素使用，这是类选择器最大的优势：

html 复制代码

<p class="warning">警告信息一</p>
<p class="warning">警告信息二</p>
<div class="warning">警告信息三</div>

css 复制代码

.warning {
  color: red;
  border: 1px solid orange;
}

无论元素是 <p> 还是 <div>，只要带有 class="warning"，都会应用相同的警告样式。

3.2 一个元素可拥有多个类

HTML 元素的 class 属性可以写多个类名，用空格分隔：

html 复制代码

<p class="text-large text-red">大号红色文字</p>

css 复制代码

.text-large {
  font-size: 24px;
}

.text-red {
  color: red;
}

这样，这个元素会同时应用两个类的样式，实现了样式的组合复用。这是类选择器最强大的特性之一------你可以把样式拆分成独立的小模块，再按需组合。

3.3 类名命名规范

只能包含字母、数字、连字符 - 和下划线 _。
不能以数字开头。
建议使用语义化命名，如 .nav-menu、.btn-primary，避免 .a1、.box2 这类无意义命名。

4. 类选择器实战示例

下面我们通过一个完整的示例，展示类选择器在实际页面中的应用：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类选择器示例</title>
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 10px;
    }

    .card-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    .card-content {
      font-size: 14px;
      color: #666;
    }

    .btn {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn-primary {
      background-color: #007bff;
      color: #fff;
    }

    .btn-danger {
      background-color: #dc3545;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="card-title">卡片标题</div>
    <div class="card-content">这是卡片的内容区域。</div>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-danger">危险按钮</button>
  </div>
</body>
</html>

在这个例子中，.btn 定义了按钮的公共样式，.btn-primary 和 .btn-danger 分别定义不同颜色的按钮，通过组合类名实现了"公共样式 + 个性样式"的经典模式。

5. 类选择器的优先级

当多个选择器同时作用于同一个元素时，浏览器会根据**优先级（权重）**决定最终应用哪个样式。

类选择器的权重值为 10，高于标签选择器（权重 1），低于 ID 选择器（权重 100）。

css 复制代码

/* 权重：1 */
p {
  color: blue;
}

/* 权重：10 */
.text {
  color: red;
}

html 复制代码

<p class="text">我是什么颜色？</p>

最终这个段落会显示红色，因为类选择器的优先级高于标签选择器。

6. 总结

本文详细介绍了 CSS 类选择器的核心知识。让我们回顾一下关键要点：

语法：用 .类名 匹配带有对应 class 属性的元素。
可重复使用：同一个类名可以被多个元素使用。
可组合：一个元素可以拥有多个类，实现样式组合复用。
命名规范 ：使用语义化命名，如 .nav-menu、.btn-primary。
优先级：类选择器权重为 10，高于标签选择器，低于 ID 选择器。

掌握了类选择器，你就掌握了 CSS 中最灵活、最常用的样式定位方式。接下来可以继续学习属性选择器、伪类选择器、伪元素 以及后代选择器、子选择器等更高级的内容，逐步构建完整的 CSS 知识体系。