最直接的方式是用ID选择器如#main-link { color: #2563eb; }，需确保CSS加载早于DOM渲染；伪类状态需单独定义如#main-link:hover；避免冗余前缀和滥用!important；JS动态修改用style.color更稳妥。
用CSS选择器直接匹配#id设置color
HTML中修改单个超链接的字体颜色，最直接的方式不是在标签里加style，而是用CSS通过ID选择器控制。只要给元素设了id（比如id="main-link"），就能用#main-link精准命中它。
注意：必须确保CSS规则加载时机早于DOM渲染，或放在里，否则可能闪动回默认蓝色。
-
#main-link { color: #2563eb; }—— 会覆盖浏览器默认的未访问链接蓝色 - 如果该链接还带
:hover、:visited等状态，要单独写，例如#main-link:hover { color: #1d4ed8; } - 不要写成
a#main-link——虽然语法合法，但ID本身全局唯一，加a前缀纯属冗余，且可能被误认为“只有a标签才能用这个ID”
为什么style="color:red"有时不生效
内联样式优先级虽高，但遇到!important或更具体的选择器（比如#nav a#main-link）时会被覆盖。常见踩坑点是CSS文件里已有类似a { color: blue !important; }，它会强行压过你的style属性。
- 用浏览器开发者工具检查计算样式（Computed tab），看
color值被哪条规则覆盖 - 若确认是
!important干扰，要么删掉源头的!important，要么在自己的ID规则里也加!important（不推荐，仅临时救急） - 避免在CSS里对
a全局设color，尤其带!important——这会让后续所有ID定制变困难
JavaScript动态改色要操作style.color而非className
如果需要运行时切换，比如点击后变色，用JS获取元素后直接改style.color最稳妥，比切CSS类更直接、无依赖。
-
document.getElementById('main-link').style.color = '#dc2626';—— 立即生效，无需预定义class - 别用
setAttribute('style', 'color:red')，它会覆盖原有内联样式（比如已有font-weight） - 如果要恢复为CSS定义的颜色，设成空字符串：
.style.color = ''，而不是null或undefined
ID选择器对伪类状态的支持限制
#id本身可以配合伪类，但要注意顺序和兼容性。比如#main-link:visited在Chrome/Firefox中有效，但部分旧版Safari可能忽略；而#main-link:active基本都支持。
- 必须写全：先ID再伪类，
#main-link:hover✅，:hover#main-link❌（无效） -
:visited能改的颜色非常有限（出于隐私保护，现代浏览器只允许color、background-color等少数几个属性） - 如果想统一管理多种状态，建议用class代替ID，比如
class="link-primary"，再写.link-primary:hover等——ID适合唯一标识，状态样式更适合class
ID不是万能的样式钩子，当一个链接需要承载多种视觉状态（悬停、点击、已访问、禁用）时，硬靠ID写一堆伪类规则反而难维护。这时候换用语义化class，配合CSS自定义属性（--link-color）控制主题色，会更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
