内部样式表是最常用、最可控的修改方式，适合单页项目或快速验证效果；需将a:link→a:visited→a:hover→a:active按LVHA顺序写在<head>内<style>中，并注意优先级、下划线及a:visited隐私限制。
在里写
内部样式表是最常用、最可控的修改方式，适合单页项目或快速验证效果。它不污染HTML结构，又比外部CSS更轻量，不需要额外文件和引入逻辑。
关键点是把CSS规则写在<head>内的<style>标签中，而不是分散在每个<a>标签里。浏览器会自动将样式应用到当前页面所有匹配的链接上。
- 只写
a { color: #007bff; }就能统一未访问链接颜色，但无法影响已访问或悬停状态 - 如果想让鼠标移上去变色，必须显式加上
a:hover { color: #dc3545; } - 不要漏掉
a:visited——否则用户点过一次后颜色就回不去了，容易造成视觉断裂 - 颜色值优先用十六进制（如
#333）或RGB（如rgb(51, 51, 51)），避免依赖浏览器对英文色名（如darkgray）的解析差异
a:link、a:visited、a:hover、a:active顺序不能乱
CSS伪类的书写顺序直接影响最终渲染效果。浏览器按“后声明覆盖前声明”规则处理，而a:visited和a:hover存在天然交集：一个已访问链接在悬停时，该用哪个颜色？答案取决于谁在CSS里写在后面。
标准且安全的顺序是LVHA：a:link → a:visited → a:hover → a:active。这个顺序确保：未访问链接用link色，点过之后变成visited色，悬停时再变hover色，点击瞬间触发active色——每一步都可预期。
立即学习“前端免费学习笔记（深入）”；
- 写成
a:hover { color: red; } a:visited { color: purple; }会导致已访问链接悬停时仍显示purple，hover失效 -
a:active必须放在最后，否则可能被hover或visited覆盖，导致点击无反馈 - 如果用了
!important强行提权，会掩盖真实优先级问题，调试时更难定位
为什么内部样式表有时不生效
常见现象是写了<style>a { color: orange; }</style>，但链接还是蓝色。这不是语法错，而是样式被更高优先级规则干掉了。
- 检查是否引入了外部CSS（比如Bootstrap），它的
a选择器可能带类名（如.nav-link）或用了!important，优先级高于纯a - 确认
<style>确实放在<head>里，而不是<body>底部——虽然部分浏览器能容错，但规范要求必须在head - 打开开发者工具（F12），选中链接元素，在Styles面板看哪条
color被划掉，点开源头就能看到是哪条规则赢了 - 临时加
a { color: orange !important; }可验证是否为优先级问题，但上线前务必删掉，它会破坏后续维护
要不要加text-decoration: none？
单纯改color不会动下划线。很多设计稿里链接是纯色无下划线的，这时候必须同步控制text-decoration，否则颜色变了但下划线还在，显得突兀。
- 默认下划线是
text-decoration: underline，要去掉就写a { color: #2c3e50; text-decoration: none; } - 如果只想悬停时才显示下划线，可以写
a { text-decoration: none; } a:hover { text-decoration: underline; } - 注意：去掉下划线后，用户可能认不出那是链接，尤其在文字密集区域。建议搭配
border-bottom或颜色对比增强可识别性
a:visited的限制：出于隐私保护，现代浏览器禁止通过CSS读取或设置已访问链接的大部分样式（包括color以外的background、border等）。所以哪怕你写了a:visited { color: purple; }，它也只在支持范围内生效——别指望靠它做复杂视觉反馈。 
