color样式没起作用最常见原因是被更高优先级规则覆盖，需检查是否被划掉、是否被!important覆盖、是否选错目标元素或受伪类/继承影响。
为什么 color 样式没起作用？先查这三处
最常见原因是被更高优先级的规则覆盖，而不是写错了属性名。浏览器开发者工具里看 color 是否被划掉（strikethrough），若被划掉，说明有更“强”的样式赢了。
- 检查是否被
!important的其他color覆盖（哪怕在另一个 CSS 文件里） - 确认元素是否继承了父级的
color，而你改的是子元素但没命中目标节点（比如写了p span { color: red; }，但实际 HTML 是text
- 留意是否用了伪类如
:link、:visited或:hover，它们自带默认颜色且优先级可能高于你的普通选择器
color 优先级怎么算？选择器权重是关键
CSS 优先级不看书写顺序，而看选择器的“重量”。一个内联 style="color: blue" 比 100 个类名加起来还重。计算规则：内联 > ID > 类/属性/伪类 > 元素/伪元素。
-
#header .nav a { color: green; }→ 权重是0,1,1,1（ID + 类 + 元素） -
.nav-link.active { color: red; }→ 权重是0,0,2,0（两个类），输给上面那个 -
div#main p:first-child { color: purple; }→0,1,0,2，赢过纯类名但输给了带 ID 的
用浏览器 DevTools 的 Styles 面板点开每条规则，右侧会显示具体权重值（如 specificity: 0,1,1,1），比死记硬背更可靠。
立即学习“前端免费学习笔记（深入）”；
想快速覆盖？慎用 !important，优先试试这些
!important 是“止痛药”，不是解法。它会让后续维护变困难，尤其团队协作时容易引发样式冲突链。
- 把选择器写得更具体：从
.btn改成.modal .btn-primary，不加!important就能提升权重 - 利用就近原则：把新样式放在引入第三方 CSS（如 Bootstrap）之后的自定义 CSS 文件中，同权重下后者生效
- 改用内联 style（仅限动态场景）：
紧急提示
如果真要用 !important，确保它只出现在你完全掌控的局部样式中，比如组件 scoped CSS 或 Shadow DOM 内。
还有这些隐藏坑：文本颜色可能被其他属性“吃掉”
即使 color 显示生效，人眼也可能看不到颜色变化——因为别的属性干扰了渲染效果。
-
opacity: 0.5会让整个元素（含文字）半透明，掩盖你设的color对比度 -
filter: grayscale(100%)或contrast(0)会重置颜色表现，color值还在，但视觉上全灰或全黑 -
background-color和color对比度过低（比如白底配浅黄文字），看起来像“没生效” - 使用了 Web Font 但字体文件未加载成功，浏览器回退到无样式的系统字体，此时某些字号/行高组合会让颜色显得模糊
.warning-text {
color: #e74c3c;
background-color: #fff;
/* 加一行确保可读性 */
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}真正难调的不是怎么写 color，而是怎么让它的效果稳定地穿透所有层叠和渲染路径。每次怀疑颜色失效，先打开 DevTools 看 computed 栏里的 color 实际值，再往上翻 styles 栏找被划掉的那一条——问题通常就藏在那里。
