这个东西吧， 其实挺简单的，就是你要是想改改网页上那个链接的颜色啊、字体啊啥的，就得用一个叫 :visited 的东西。 我爱我家。 这个是啥呢？就是你点过那个链接之后它就会变颜色，让你知道你是不是点过了。

啥是 :visited 啊？

这个 :visited 是个 CSS 里的一个伪类， 就是说你点过这个链接之后它就会被标记成 visited然后你可以给它换个颜色啥的， 本质上... 告诉用户“哎，你来过这儿了”。

比如你写个：

a:visited { color: purple; }

这样点过的链接就变紫色了。这个颜色就是告诉用户“你来过这儿了”。

怎么写 :visited 样式

你要是想改样式， 就直接写在 a 标签上，比如：，往白了说...

a:visited {
  color: purple;
}

这样点过之后颜色就变了。不过你得注意， 不是啥都能改的，浏览器为了保护你的隐私，只让你改颜色，别的都不让动，比如背景、边框、字体大小这些都不行，掉链子。。

能改啥？不能改啥？

你只能改颜色、 背景色、边框色这些不影响布局的，别的比如字体大小、边距、显示方式这些都不行。 摆烂。 为啥？主要原因是浏览器怕你用这些样式来偷看别人的历史记录，所以限制得死死的。

a:visited {
  color: red;
  background-color: yellow;
  border-color: blue;
}

这些颜色能改， 但是你要是写个 font-size 或者 margin那就不行了浏览器会直接忽略。

顺序很重要

你写 CSS 的时候，顺序不能乱。比如你写 a:visited 坦白讲... 要是写在 a:link 前面那可能就出错了。所以要按顺序写：

1. a:link
2. a:visited
3. a:hover
4. a:active

这个顺序叫 LVHA， 就是 Link、Visited、Hover、Active 的缩写。你得按这个顺序写， 不然样式会出问题，比如你要是把 :visited 写在前面那可能没效果。

你写 CSS 的时候， 可以这样写：

a:link {
  color: #007bff; /* 没点过的链接 */
}
a:visited {
  color: #6610f2; /* 点过的链接，颜色暗一点 */
}
a:hover {
  color: #0056b3; /* 鼠标放上去变深 */
  text-decoration: underline; /* 加个下划线 */
}

这样用户点过链接之后颜色就变了而且鼠标放上去还有提示。

隐私保护是啥意思？

浏览器怕你用 :visited 来偷看别人的历史记录， 所以限制了你只能改颜色，别的都不行。比如你不能用 JavaScript 去查用户点过哪些链接， 也不能改布局相关的样式，比如 displaymarginpadding 这些都不行。这是为了防止你用样式来偷看用户的历史记录。

不能用 JavaScript 获取 :visited 的状态

你不能用 JavaScript 去查用户是不是点过链接， 比如你写个：，我给跪了。

getComputedStyle.color

或者

window.getComputedStyle

这些都不行，浏览器会直接返回默认值，不会告诉你用户是不是点过。

能改的样式有限

怎么设置样式

a:link {
  color: #007bff; /* 没点过的链接 */
}
a:visited {
  color: #6610f2; /* 点过的链接，颜色暗一点 */
}
a:hover {
  color: #0056b3; /* 鼠标放上去变深 */
  text-decoration: underline; /* 加个下划线 */
}

顺序不能乱

1. a:link
2. a:visited
3. a:hover
4. a:active

你写的时候可以这样写：

a:link {
  color: #007bff; /* 没点过的链接 */
}
a:visited {
  color: #6610f2; /* 点过的链接， 颜色暗一点 */
}
a:hover {
  color: #0056b3; /* 鼠标放上去变深 */
  text-decoration: underline; /* 加个下划线 */
}

getComputedStyle.color

window.getComputedStyle

1. a:link
2. a:visited
3. a:hover
4. a:active