CSS超链接伪类样式

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>

代码演示效果:

CSS超链接伪类样式_第1张图片

总结:

在css中,这四种状态必须按照固定的顺序写:

a:link >a:visited >a:hover >a:active

link和visited是a标签独有的状态
hover和active是所有的元素都可以设置的
以上就是CSS超链接伪类样式的使用介绍了 谢谢观看❀❀

你可能感兴趣的:(css,前端)