HTML类选择器写在CSS中，以英文句点.开头，匹配HTML中class属性对应的元素；类名不能数字开头、不含空格/中文，大小写敏感；常见失效原因包括路径错误、优先级覆盖、拼写不一致等。
HTML 类选择器不是“用在 HTML 里”的东西，它写在 CSS 里，作用对象是 HTML 中带 class 属性的元素——搞反顺序是新手最常卡住的地方。
类选择器怎么写才生效
必须以英文句点 . 开头，后面紧跟类名，中间不能有空格或符号。类名本身不能以数字开头，也不能含空格、中文或特殊字符（下划线和短横线可以）。
常见错误现象：.my class（含空格，无效）、.1st-item（数字开头，部分老浏览器不认）、.btn-primary active（这其实是两个选择器，中间空格表示后代关系）。
-
.header匹配所有<div class="header">、<h1 class="header">等任意标签 - 一个元素可有多个类：
<p class="text warning highlight">，对应可写.text、.warning或组合.text.warning（无空格，表示“同时具备两个类”） - 类名大小写敏感：
.Button不匹配class="button"
为什么加了 class 却没样式？
最常见原因是 CSS 文件没加载、选择器优先级被覆盖，或类名拼写不一致（包括空格、连字符、大小写）。浏览器开发者工具里看“Computed”面板，能直接看到哪条规则被禁用、为什么失效。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中是否漏写了
class属性，或属性值多写了引号外的空格：class=" btn "实际匹配的是.btn吗？不，它匹配的是.btn（引号内首尾空格会被浏览器忽略），但如果你写了class="btn large"，那.btn和.large都有效 - CSS 文件路径写错、404、MIME 类型不对（如服务器返回
text/plain而非text/css）都会导致样式完全不加载 -
.container .item优先级高于.item，如果后者被前者覆盖，改用更具体的选择器，或加!important（慎用，只临时排查）
和 ID、标签选择器混用时要注意什么
类选择器优先级（specificity）比标签选择器高，比 ID 选择器低。这意味着 #nav .link 会盖过 .link，但 .nav .link 和 .link 冲突时，前者胜出。
- 别为了强行提高优先级疯狂嵌套：
.header .nav .menu .item—— 可维护性差，且容易因 DOM 结构微调而失效 - ID 选择器虽强，但一个页面只能用一次；类选择器可复用，适合组件化开发（比如
.card、.btn--primary） - 现代项目常用 BEM 命名：
.button--large表示修饰态，.button__icon表示子元素，靠命名约定代替深层嵌套
真正难的不是写对一个 .class，而是当项目变大、多人协作、CSS 文件拆分后，类名冲突、样式泄露、覆盖逻辑变隐晦——这时候光靠选择器语法已经不够，得靠命名规范、作用域控制（如 CSS Modules）或者原子化方案（如 Tailwind）来兜底。
