CSS :link选择器，匹配未被点击的链接

:link选择器

CSS伪类选择器:link，一般情况下可用于匹配获取未被访问点击的链接元素。那么如果是按钮或其它的HTML元素可不可以被选择呢？下方的实例将对此进行尝试。

---

:link选择器语法

A:link {样式设置}

:link选择器匹配链接实例代码，及在线编辑器

<a href='#1' class='e1' target='_blank'>python全栈</a><br><br>
<a href='#2' class='e1' target='_blank'>CSS教程</a>

<style>
  .e1:link{color:skyblue;}
</style>

试一试

实例代码提示

如上代码，运行之后，两个链接未访问过的颜色均为skyblue，点击之后，对应的链接颜色将发生变化。注意：如果链接的href属性的值添加的是浏览器之前访问过的网址，可能会受浏览器缓存的影响，导致:link选择器无法选择未访问点击的链接。

---

:link选择器是否可以选择其它的HTML元素

对此疑问，下面的实例将直接进行尝试，看看:link是否可以选择未点击的div元素：

<div class='e2'></div><br>
<div class='e2'></div><br>
<button class='e3'>按钮</button>


<style>
  .e2{width:50px;height:50px;background-color:skyblue;}
  .e2:link{background-color:blue;}
  .e3:link{background-color:blue;}
</style>

试一试