CSS超链接伪类样式

Bi8bo

已于 2023-12-21 09:57:47 修改

阅读量266

点赞数 6

文章标签： css 前端

于 2023-12-20 15:42:10 首次发布

本文链接：https://blog.csdn.net/2302_77874940/article/details/135056885

版权

CSS超链接伪类样式

概念：
什么是伪类？伪元素？
- 1、伪类
- 2、伪元素
总结：

概念：

CSS超链接伪类样式是一种用于为超链接元素添加特定样式的CSS选择器。伪类是一种选择器，它允许根据元素的状态或位置来选择元素，而不仅仅是根据元素的标签名或类名来选择。

什么是伪类？伪元素？

1、伪类

概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2、伪元素

概念：伪元素是一种选择器，它分状态伪类与结构性伪类 用于在文档中插入虚构的元素。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
本文是围绕着状态伪类讲解的。

状态伪类：
基于元素当前状态进行选择的
元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
以下是常见的一些状态伪类

伪类	说明	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{font-size:100px}
a:visited	单击访问后超链接样式	a:visited{color:#999;}

在超链接中，常用的伪类样式有以下几种：

1、link：用于选择未访问过的链接。例如，可以使用该伪类设置链接的颜色或背景颜色。

a:link {
  color: blue;
}

2、visited：用于选择已访问过的链接。同样可以使用该伪类设置链接的颜色或背景颜色。

a:visited {
  color: #00FF00;
}

3、hover：用于选择鼠标悬停在链接上的状态。可以使用该伪类设置链接在鼠标悬停时的样式。

a:hover {
   font-size: 120px;
}

4、active：用于选择链接被点击时的状态。可以使用该伪类设置链接在被点击时的样式。

a:active{
	color:pink;
}

伪类演示综合演示代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>超链接样式</title>
    <style>
        a:link {              /* 未访问链接时*/
            color:blue;
        }
        a:visited {             /* 已访问链接 */
            color:#00FF00;
        }
        a:hover {               /* 鼠标移动到链接上 */
            color:pink;
        }
        a:active {              /* 鼠标点击时 */
            color:red;
        }
    </style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>