在网页样式开发中，CSS类选择器是最常用也最容易被误用的选择器之一。它通过将一组样式绑定到一个可复用的类名上，让多个HTML元素共享同样的外观表现。理解它的定义方法和书写规则，是写出可维护前端代码的基础。
类选择器的基础定义语法
类选择器以英文句点（.）作为前缀，后面紧跟类名。类名在HTML中通过元素的class属性指定。CSS规则中的类选择器不需要包含class这个单词，而是直接写点加名称。浏览器解析时会自动寻找所有class属性中包含该名称的元素并应用样式。
下面是一段最基础的写法示例，我们定义一个让文字变灰并且加粗的类，并将其用在两个不同标签上：
<style>
.gray_bold {
color: #666;
font-weight: bold;
}
</style>
<p class="gray_bold">这是一段灰色加粗文字</p>
<span class="gray_bold">这也是灰色加粗</span>
从上面的代码可以看出，类选择器的优势在于解耦：样式只写一次，结构任意复用。相比之下，如果直接写p{font-weight:bold}就只能约束p标签，而类选择器不受标签类型限制。
需要注意的是，类名本身不能以数字开头，也不能包含空格或特殊符号（下划线和中划线是允许的）。例如.1col在标准CSS中无效，而.col_1或.col-1则没问题。
一个元素使用多个类的叠加规则
HTML的class属性值可以包含多个类名，彼此用空格分开。这意味着同一个元素能够同时获得来自不同类选择器的样式。当这些类中的声明互不冲突时，所有效果会合并呈现；当发生属性冲突时，则依据CSS优先级和书写顺序决定最终表现。
看下面这段示例，我们定义了两个独立类，并让一个div同时引用它们：
<style>
.box {
border: 1px solid #ccc;
padding: 10px;
}
.text_red {
color: red;
}
</style>
<div class="box text_red">
带边框且文字为红色的容器
</div>
这种多类组合的方式在组件化开发中非常普遍。比如按钮可以拆成.btn定义尺寸、.btn_primary定义主色、.btn_disabled定义禁用态，通过组合而非重写来拼装样式，显著降低冗余。
如果.box和.text_red都设置了color，且两者权重相同，那么后出现的规则胜出。因此项目里一般会约定基础类在前、修饰类在后，或者在文档中明确覆盖关系，避免调试时找不到样式来源。
类选择器与标签、id选择器的区别
很多初学者会混淆类选择器、标签选择器和id选择器。标签选择器直接写元素名，如div，作用于所有该标签；id选择器以#开头，如#header，对应HTML中唯一的id属性，全页只能出现一次；类选择器以.开头，可重复出现，是最平衡的复用方案。
我们用一个对照表来理清三者在权重和复用性上的差异：
| 选择器类型 | 写法示例 | 复用性 | 优先级（大致） |
|---|---|---|---|
| 标签选择器 | div | 所有该标签 | 低 |
| 类选择器 | .active | 可多次使用 | 中 |
| id选择器 | #top_bar | 仅一次 | 高 |
在实际项目中，推荐以类选择器为主来搭建样式体系，id选择器留给JavaScript锚点或唯一结构块，标签选择器仅用于极基础的重置。这样既能保证灵活，也方便后期覆盖与维护。
另外要注意，函数调用input()和HTML标签<input>不是一个概念。在CSS里我们不会用函数形式去选择类，类选择器就是单纯的点加名字，写错成.input()不仅无效，还会让整条规则被浏览器丢弃。
常见书写错误与避坑建议
第一类错误是忘记写句点，直接把类名当标签写，例如写gray_bold{}而不是.gray_bold{}，此时它会被解析为未知标签选择器，自然匹配不到任何带class的元素。第二类错误是在HTML里把多个类用逗号隔开，像class="box,text_red"，这会被当成一个完整类名，而不是两个类。
第三类错误是在类名中使用了HTML特殊字符，例如想表达小于号含义写成.lt_10，虽然下划线版没问题，但若真写.lt<10就会被解析器截断。在CSS文件和HTML属性里都要保证类名是纯字母数字加连字符或下划线。
/* 错误：缺少句点 */
error_tip { color: red; }
/* 正确 */
.error_tip {
color: red;
font-size: 12px;
}
/* 错误：类名带空格，实际应拆成两个类 */
.class name { background: #eee; }
建议在团队中统一类命名规范，比如使用BEM风格（block__element--modifier）来减少冲突。同时借助编辑器插件做合法性校验，能在书写阶段就拦住大多数类选择器语法问题。
只要记住类选择器就是点加名字、HTML中用class绑定、可多类空格并列这三条核心规则，就能避开绝大部分相关bug，写出清晰且易扩展的样式代码。