.class选择器设color只需写.your-class-name{color:#333;}，仅影响自身文字颜色且不继承；多class用逗号分隔共享样式；属性选择器[class^="text-"]可匹配开头含text-的class；color失效时优先检查覆盖规则、inherit继承及CSS变量定义。
用 .class 选择器直接设置 color 属性
只要 class 名确定，写一条 .your-class-name { color: #333; } 就能生效。浏览器会自动把匹配到的元素文字颜色改成你指定的值。
注意：这个规则只影响元素自身的文字颜色，不继承给子元素（除非子元素没设 color，才会从父级继承）。
- class 名区分大小写，
btn-primary和Btn-Primary是两个不同 class - 如果元素同时有多个 class（比如
<p class="text warning">），只要其中任意一个被选中，样式就生效 - 内联 style 或
!important会覆盖它，优先级比普通 class 高
多个 class 共享同一套 color 样式
不想重复写相同颜色？用逗号分隔多个 class 名即可：
.error, .warning, .info {
color: #d32f2f;
}这样 <span class="error">、<div class="warning">、<p class="info"> 都会变成红色。
立即学习“前端免费学习笔记（深入）”；
常见踩坑：逗号后面不能多空格或换行缩进错误（虽然多数浏览器容错，但某些旧版 IE 会失效）；另外别漏掉点号——写成 error, warning 就变成标签选择器了，完全不匹配 class。
用属性选择器匹配 class 名的一部分
当 class 名有规律（比如都以 text- 开头），可以用属性选择器批量控制：
[class^="text-"] {
color: #1976d2;
}上面这句会让 <span class="text-blue">、<div class="text-large"> 都变蓝。
但要注意：[class^="text-"] 只匹配 class 属性值「以 text- 开头」的元素，如果 class 是 highlight text-red（text-red 在中间），就不会命中。真要匹配包含某字符串，得用 [class*="text-"]，不过性能略差，且可能误伤（比如匹配到 background-text）。
color 不生效？先查这三件事
最常遇到的问题不是写法错，而是被其他规则盖过去了。打开浏览器开发者工具（F12），点中元素，看右边 Styles 面板里 color 是否被划掉：
- 被更具体的选择器覆盖（比如
div .my-class比.my-class优先级高） - 父元素设置了
color: inherit，而子元素又没重写，结果“继承”了上级颜色 - 用了 CSS 自定义属性但没定义，比如写了
color: var(--text-color);却没在 :root 或父级设--text-color
真正难调的往往不是怎么写，而是搞清哪条规则最终胜出——别急着改 color 值，先盯住 computed 面板里的实际生效值和来源路径。
