HTML&CSS基础-伪类的顺序
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类的顺序</title> <style type="text/css"> /**
* 设计到a的伪类一共有以下4个:
* :link
* :visited
* :hover
* :active
* 而这四个选择器的优先级是一样的,因此要特别注意写入a的伪类是要特别注意顺序应该未lvha,如下面所写。如果你擅自调换了顺序,则遵循"选择器的优先级一样,则使用靠后的样式"的规则。
*
*/ /**
* 未访问过的正常链接
*/
a:link{
color: yellowgreen;
} /**
* 访问过的链接
*/
a:visited{
color: red;
} /**
* 鼠标移入
*/
a:hover{
color: orange;
} /**
* 正在点击
*/
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.cnblogs.com/yinzhengjie/">访问过的链接</a>
<br /><br />
<a href="https://www.baidu.com/">未访问过的链接</a>
</body>
</html>
二.浏览器打开以上代码渲染结果