锚伪类的四种伪类

来源：互联网发布：淘宝双11外围有效果吗编辑：程序博客网时间：2024/05/29 03:43

伪类：

与类选择器相似但是又有所不同

锚伪类：

<style>a:link{color: #2AABD2;font: "微软雅黑";font-size: 50px;}</style>

作用：给a标签设置没有访问过的样式
a:visited

a:visited{color: palevioletred;font: "微软雅黑";font-size: 30px;}

作用：给a标签设置访问过的样式
a:hover

a:hover{color: #000000;font: "微软雅黑";font-size: 30px;}

给a标签设置鼠标悬停时的样式
a:active

a:active{color:#3E8F3E;font: "微软雅黑";font-size: 30px;}</style>

作用：设置a标签激活时的样式

注意：在使用时一定遵循这样的顺序：

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

有些锚伪类可以作用a标签上也可以作用在其他标签上：

a:link，a:visited 只能用于a标签
:hover，其他标签也可以使用这个伪类
a:active，其他标签也可以使用这个伪类

五彩导航：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>a{color: white;text-decoration: none;background-color: pink;width: 120px;height: 58px;display: inline-block;text-align: center;/*水平居中*/line-height: 58px;/*垂直居中*/}.one{background-color: paleturquoise;}.two{background-color: pink;}.three{background-color: plum;}.four{background-color: mediumpurple;}.one:hover{background-color: papayawhip;}.two:hover{background-color:palegreen;}.three:hover{background-color:hotpink;}.four:hover{background-color:deepskyblue;}</style></head><body style="text-align: center;"><a class="one" href="#">导航1</a><a class="two" href="#">导航2</a><a class="three" href="#">导航3</a><a class="four" href="#">导航4</a></body></html>

阅读全文

0 0