CSS入门基础教程：CSS伪类(pseudo-class)

2020-03-24 17:28:08

字体：大中小

来源：转载

供稿：网友

锚(a)伪类是最常用的伪类。例句如下：a:link {color: #FF0000} /* 未被访问的链接红色 */
a:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */ 示例： html
head
title CSS伪类 pseudo-class /title
style type="text/css"
a:link {color: #FF0000} /* 未被访问的链接红色 */
a:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
/style
/head body a href = "http://book.chinaz.com" 站长站站长书库网站 - 网页教程与代码的中文站点 /a /body
/html 也可以用HTML的class属性来设定伪类。例句如下：a.c1:link {color: #FF0000} /* 未被访问的链接红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
示例： html
head
title CSS伪类 pseudo-class /title
style type="text/css"
a.c1:link {color: #FF0000} /* 未被访问的链接红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
/style
/head body p a class = "c1" href = "http://book.chinaz.com" 站长站站长书库网站 - 网页教程与代码的中文站点 /a /p p a href = "http://book.chinaz.com/html/index.html" 魔兽世界中的可爱玩家 /a /p /body
/html 注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS3属性box-shadow详解

下一篇：用CSS属性选择器控制链接样式