类选择器在CSS中以英文点号.开头，后接自定义名称（仅含字母、数字、下划线、短横线），如.btn{background:#007bff;}；HTML中通过class属性调用，可单个或多个空格分隔，如<button class="btn">提交</button>。
直接用 .class 就能给多个元素统一设置样式，关键在于“定义一次、复用多次”，不依赖元素类型，也不限制数量。
类选择器怎么写（CSS端）
在 CSS 中以英文点号 . 开头，后面接自定义名称，名称里不能有空格或特殊符号（可含字母、数字、下划线、短横线）：
.btn { background: #007bff; color: white; padding: 8px 16px; }.error { color: #d32f2f; font-weight: bold; }.text-center { text-align: center; }
HTML里怎么用（元素端）
给任意 HTML 元素添加 class 属性，值为对应类名（可单个，也可多个，用空格分隔）：
<p class="error">请输入有效邮箱</p><button class="btn">提交</button><div class="btn text-center">居中按钮</div><span class="error text-center">错误提示</span>
为什么推荐用类选择器而不是重复写样式
它解决的是“样式复用”和“语义清晰”两个实际问题：
立即学习“前端免费学习笔记（深入）”；
- 改一处 CSS，所有带该 class 的元素自动更新，不用逐个修改 style 属性
- 类名如
.is-hidden、.is-active能表达状态，比内联样式更易维护 - 支持组合使用，比如
<input class="form-input error">同时获得基础输入样式和错误态样式
常见误区提醒
注意几个容易出错的细节：
- class 名称区分大小写，
.Button和.button是两个不同类 - HTML 中 class 值里多个类名之间只能用空格，不能用逗号或句点
- 不要把 class 当 ID 用——同一个 class 可以出现在页面任意多处，ID 才要求唯一
- 类选择器优先级低于内联样式、高于标签选择器，冲突时按特异性计算，不是简单“后写的覆盖前写的”
