css 伪类

最新推荐文章于 2025-08-12 16:33:58 发布

原创最新推荐文章于 2025-08-12 16:33:58 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文详细介绍了CSS中针对链接(<a>标签)的五种伪类:a:link、a:visited、a:hover、a:active及a:focus的状态含义与应用场景,并简单提及了CSS2.1引入的其他伪类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<a href="http://www.newhua.com">www.newhua.com</a>

css:

A {

FONT-SIZE: 40px; COLOR: #000000; TEXT-DECORATION: none

}

A:hover {

COLOR: #ffcc00

}

A.blue {

COLOR: darkblue

}

以上面这段代码为例，

A {...}

在这里可以修改有关链接的诸如字体、颜色等属性，注意这里是指在常规状态下的链接样式。本例中就是指“www.newhua.com”的样式；

A:hover {}

这里用到了css中的伪类：

伪类是指一种伪类选择符，经典的css中都只包括超链接（<a>）。

a:link、a:visited、a:hover、a:active、a:focus五个伪类。

css2.1之后又添加了first-child和lang()等其他一些伪类。

这些伪类一般添加在<head>节点中，下面开始一一介绍<a>的5种伪类：

1.a:link

状态：链接未点击上去时候（一般使用默认属性，不需要另外重新设置）
2.a:visited
状态：顾名思义，当链接被点击后，属性启用该设置
3.a:hover
状态：当鼠标放在链接上但并未点击时
4.a:active
状态：这个状态有点特殊，是介于hover /visited 之间的一个状态，也可以说是链接被按下的时候的状态

5.a:focus
状态：一个链接得到焦点时的状态。（也就是用tab键能选到的状态）与hover功能有些相似。
其他的伪类