直接用 a 标签的 color 属性控制链接颜色，因 a 有默认样式（如蓝色、紫色），需显式覆盖；须用伪类 a:link、a:visited、a:hover、a:active 分别设置，推荐统一色值并单独定义悬停效果。
直接用 a 标签的 color CSS 属性就行
DIV 只是容器，真正控制字体颜色的是 a 元素本身。浏览器默认会给链接加下划线并设为蓝色（color: #0000EE），所以必须显式覆盖它。
常见错误是只给 div 设 color，但 a 有自己默认样式，会继承失败——因为 a 的默认 color 是明确声明的，优先级高于父级继承值。
- ✅ 正确写法：
a { color: #333; }或更精准地div a { color: #333; } - ⚠️ 错误写法：
div { color: #333; }—— 这不会改变链接文字颜色 - 注意：如果链接已访问过，默认是紫色，需同时设置
a:visited { color: ... }才能统一
处理不同状态要用伪类分别定义
链接有未访问（:link）、已访问（:visited）、悬停（:hover）、激活（:active）四种状态。只改 a 默认色，悬停时可能又变蓝。
- 推荐一次性写全：
a:link, a:visited, a:hover, a:active { color: #2c3e50; } - 若要悬停变色，单独加：
a:hover { color: #e74c3c; } -
:visited受浏览器限制，不能读取或设置除color、background-color等极少数属性，别试图用它改font-size或display
内联样式或 !important 是临时补救，不是解法
遇到改了 CSS 还不生效，大概率是选择器优先级被其他规则压过了，比如框架（Bootstrap）、UI 库或全局 a 样式。
立即学习“前端免费学习笔记（深入）”；
- 先用浏览器开发者工具检查元素，看哪条
color被划掉，被谁覆盖 - 提升选择器权重比滥用
!important更可持续，例如：div.my-container a { color: #16a085; } - 内联样式如
<a style="color:#9b59b6">...能强制生效，但无法复用、难维护，仅限调试或极简场景
Flex/Grid 容器里链接颜色没变化？检查是否被 text-decoration 干扰
有时改了 color 却觉得“颜色不对”，其实是 text-decoration-color 或下划线颜色在干扰视觉判断——特别是深色背景上浅色文字配默认蓝色下划线，显得突兀。
- 一并清除或统一控制下划线：
a { color: #ecf0f1; text-decoration-color: currentColor; } -
currentColor是个实用值，它等于当前元素的color，能让下划线自动随文字变色 - 若完全不要下划线：
a { text-decoration: none; }，但请确保有其他视觉提示（比如悬停背景色），否则可访问性会下降
:visited”这种细节上。真正麻烦的往往不是怎么写，而是查清哪条规则在暗中作祟。 
