Ceryn

CSS 位置伪类

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 伪类

伪类 | MDN

引入

网页中的链接会根据访问状态显示不同的样式，页面中的元素也可能被 URL 锚点指向。

CSS 位置伪类就是用来选中这些链接状态和被锚点指向的元素的。

正文

定义

定义

CSS 位置伪类用于选中链接的不同访问状态，以及被 URL 锚点指向的元素。

位置伪类主要包括链接伪类和目标伪类。

常见位置伪类

选中未访问过的链接。

a:link {
  color: blue;
  text-decoration: none;
}

这条规则会让所有未访问过的链接显示为蓝色，不带下划线。

:visited

选中已访问过的链接。

a:visited {
  color: purple;
}

当用户点击过链接后，链接颜色会变成紫色，让用户知道这个链接已经访问过了。

选中所有链接，无论是否访问过。

a:any-link {
  text-decoration: underline;
}

这条规则会给所有链接添加下划线，不区分是否访问过。

:any-link 相当于 :link 和 :visited 的组合。

:target

选中被 URL 锚点指向的元素。

<h2 id="section1">第一章</h2>
<h2 id="section2">第二章</h2>
h2:target {
  background-color: yellow;
  border-left: 4px solid orange;
}

当用户访问 https://example.com/page.html#section1 时，id="section1" 的标题会显示黄色背景和橙色左边框，提示用户当前定位到了这个位置。

例子

链接状态样式

<nav>
  <a href="https://example.com">首页</a>
  <a href="https://example.com/about">关于</a>
  <a href="https://example.com/contact">联系</a>
</nav>
/* 未访问的链接 */
a:link {
  color: #2563eb;
  text-decoration: none;
}
 
/* 已访问的链接 */
a:visited {
  color: #7c3aed;
}
 
/* 鼠标移到链接上 */
a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
 
/* 鼠标点击链接时 */
a:active {
  color: #1e40af;
}

这个例子让链接根据不同状态显示不同颜色，用户能清楚地看到链接的访问状态和交互反馈。

锚点跳转高亮

<nav>
  <a href="#intro">简介</a>
  <a href="#features">功能</a>
  <a href="#contact">联系</a>
</nav>
 
<section id="intro">
  <h2>简介</h2>
  <p>这是简介内容。</p>
</section>
 
<section id="features">
  <h2>功能</h2>
  <p>这是功能介绍。</p>
</section>
 
<section id="contact">
  <h2>联系</h2>
  <p>这是联系方式。</p>
</section>
section:target {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding-left: 16px;
  animation: highlight 1s ease-out;
}
 
@keyframes highlight {
  from {
    background-color: #fde68a;
  }
  to {
    background-color: #fef3c7;
  }
}

当用户点击导航链接时，对应的区块会高亮显示，并带有简短的渐变动画，让用户明确知道页面跳转到了哪个位置。

所有链接统一样式

/* 选中所有链接，无论是否访问过 */
a:any-link {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}
 
a:any-link:hover {
  color: #1e40af;
}

这个例子给所有链接设置统一的样式，不区分访问状态，适合现代扁平化设计风格。

特点

  • :link 选中未访问的链接
  • :visited 选中已访问的链接
  • :any-link 选中所有链接，等同于 :link 和 :visited 的组合
  • :target 选中被 URL 锚点指向的元素
  • 链接伪类只对带有 href 属性的 <a> 元素生效
  • :target 可以用于任何带有 id 的元素
  • 链接伪类的顺序很重要，通常按 :link → :visited → :hover → :active 书写
  • :visited 出于隐私保护，只能设置少数几个样式属性

注意事项

  • :link 和 :visited 的样式顺序要注意，:visited 要写在 :link 后面
  • :visited 只能设置 color、background-color、border-color 等少数属性，出于隐私保护不能设置其他样式
  • :any-link 的浏览器兼容性比较好，但某些老旧浏览器可能不支持
  • :target 配合平滑滚动 scroll-behavior: smooth 使用体验更好
  • 不要让链接的未访问和已访问状态颜色对比度太低，否则影响可读性
  • :target 高亮效果不要太刺眼，避免影响阅读体验

理解

可以把位置伪类理解为”链接状态和锚点定位的检测器”。

:link 和 :visited 让浏览器能识别用户是否访问过某个链接，从而给未访问和已访问的链接设置不同颜色，帮助用户判断哪些内容看过、哪些还没看。

:target 让浏览器能识别当前 URL 锚点指向的元素，从而高亮显示这个元素，提示用户页面定位到了哪个位置。

这些伪类的核心价值是提升导航体验和页面定位反馈，让用户在浏览网页时能更清楚地知道自己访问过哪些内容、当前在哪个位置。

引出

理解了位置伪类之后，可以继续学习：

也可以学习 scroll-behavior: smooth 属性，配合 :target 实现平滑滚动效果。

关系图谱

反向链接