伪类选择器

最新推荐文章于 2025-02-17 20:22:10 发布

jlhaoran

最新推荐文章于 2025-02-17 20:22:10 发布

阅读量606

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/72830442

版权

HTML 专栏收录该内容

29 篇文章

订阅专栏

伪类选择器
链接<a href=”#”></a>
a:link 链接的正常状态
a:visited 鼠标单击过的链接状态
a:hover 鼠标放在链接上面的（悬停）状态
a:active 当前正在访问的链接状态

当有多种链接样式时，通常配合类来设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css">
a.test1:link,a.test1:visited{ color:red;} /**链接的正常状态  鼠标单击过的链接状态**/
a.test1:hover{color:blue;}   /**鼠标放在链接上面的**/

a.test2:link,a.test2:visited{color:orange;}
a.test2:hover{color:green;}

</style>
 </head>

 <body>
  <a href="#" class="test1">测试链接样式的四种状态</a><br />
  <a href="#" class="test1">测试链接样式的四种状态</a><br />
  <a href="#" class="test2">测试链接样式的四种状态</a><br />
  <a href="#" class="test2">测试链接样式的四种状态</a>

  <br />
  <a href="#">测试</a>
 </body>
</html>