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

1. 引言

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

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

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

2. 什么是类选择器

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

.类名 {
属性: 值;
}

对应的 HTML 写法：

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

CSS 写法：

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

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

3. 类选择器的核心特性

3.1 可重复使用

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

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

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

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

3.2 一个元素可拥有多个类

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

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

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

.text-red {
color: red;
}

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

3.3 类名命名规范

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

4. 类选择器实战示例

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

<!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）。

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

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

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

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

6. 总结

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

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

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