HTML5与CSS3基础语法自学教程（十八）

关注

原创最新推荐文章于 2026-08-14 11:53:25 发布 114 阅读 AI 写同款· GEO 优化 ›

PaddleOCR实战：给图片‘加个框’，轻松搞定小图和长图文字识别不准的难题本文探讨了PaddleOCR在处理小图和长图时识别精度下降的问题，并提出通过图像边框预处理技术显著提升OCR识别效果。详细介绍了使用OpenCV实现智能边框添加的方法，包括核心原理、工程实践中的关键细节以及性能优化策略，帮助开发者轻松解决非常规尺寸图像的文本检测难题。阅读详情

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节讲解与 <a> 元素有关的伪类选择器，主要包含动态伪类选择器和目标伪类选择器两种。这两种伪类选择器的主要应用场景都是与 <a> 元素有关的，并且通过这两种伪类选择器可以实现比较丰富的效果。

动态伪类选择器

动态伪类选择器可以划分为链接中锚点的伪类选择器和用户行为的伪类选择器，具体如下表所示：

伪类选择器	类型	描述
`e:link`	链接锚点伪类选择器	匹配的 e 元素，定义了超链接并且未被访问过
`e:visited`	链接锚点伪类选择器	匹配的 e 元素，定义了超链接并且已被访问过
`e:active`	用户行为伪类选择器	匹配的 e 元素，定义了超链接并且被激活
`e:hover`	用户行为伪类选择器	匹配的e元素，定义了超链接并且用户鼠标悬停在链接文本内容上
`e:focus`	用户行为伪类选择器	匹配的 e 元素，定义了超链接并且获得焦点

如下示例代码展示了动态伪类选择器在 <a> 元素上应用：

a:link { color: #FF0000 }         /* 未访问的链接 */
a:visited { color: #00FF00 }    /* 已访问的链接 */
a:hover { color: #FF00FF }        /* 鼠标移动到链接上 */
a:active { color: #0000FF }        /* 选定的链接 */

动态伪类选择器并不是只能应用于 <a> 元素，其他 HTML 元素同样可以使用动态伪类选择器。例如在 HTML 页面中的 <button> 按钮元素可以配合 :hover 伪类选择器来使用，如下示例代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>动态伪类选择器</title>
  <style>
    /* 鼠标移动到链接上 */
    button:hover {
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <button>这是一个按钮</button>
</body>

</html>

上述示例代码运行效果如下图所示：

02-01.gif

注意：在触摸屏上 :hover 基本不可用。不同的浏览器上:hover 伪类表现不同。

目标伪类选择器

目标伪类选择器指的是 CSS 中的 :target 伪类选择器，该伪类选择器用来设置 <a> 元素锚点功能中的目标元素的样式。如下示例代码展示了 :target 伪类选择器的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>目标伪类选择器</title>
  <style>
    p:target {
      background-color: gold;
    }

    /* 在目标元素中增加一个伪元素*/
    p:target::before {
      font: 70% sans-serif;
      content: "►";
      color: limegreen;
      margin-right: .25em;
    }

    /*在目标元素中使用italic样式*/
    p:target i {
      color: red;
    }
  </style>
</head>

<body>
  <h3>Table of Contents</h3>
  <ol>
    <li><a href="#p1">Jump to the first paragraph!</a></li>
    <li><a href="#p2">Jump to the second paragraph!</a></li>
    <li><a href="#nowhere">This link goes nowhere,
        because the target doesn't exist.</a></li>
  </ol>

  <h3>My Fun Article</h3>
  <p id="p1">You can target <i>this paragraph</i> using a
    URL fragment. Click on the link above to try out!</p>
  <p id="p2">This is <i>another paragraph</i>, also accessible
    from the links above. Isn't that delightful?</p>
</body>

</html>

上述示例代码运行效果如下图所示：