css中的锚伪类
2019-04-10 本文已影响0人
不会潜水的猫小喵
1.超链接
html中的<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a href="http://www.baidu.com">test</a>
</body>
</html>
有些情况下可能会将a标签的href属性值设置为空，但不同的写法会产生不同的效果，具体情况如下：
- 点击链接后不做任何事情
//点击链接，默认上滚到页面顶部
<a href="#">test</a>
/点击链接，停在当前位置
<a href="####">test</a> //使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的。
<a href="javascript:void(0);">test</a> //javascript:void(0) 仅仅表示一个死链接，执行空事件
<a href="javascript:;" >test</a> //其他写法
- 点击链接后，响应用户自定义的点击事件
<a href="javascript:void(0);" onclick="fn()">test</a>
<a href="javascript:;" onclick="fn()">test</a>
<a href="#" onclick="fn(); return false;">test</a>
<a href="#" onclick="fn(); event.returnValue = false;">test</a>
2.锚伪类
在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {color: grey;}
a {color: red;}
a:link {color: green;} /* 未访问的链接 */
a:visited {color: blue;} /* 已访问的链接 */
a:hover {color:orange;} /* 鼠标移动到链接上 */
a:active {color: yellow;} /* 选定的链接 */
</style>
</head>
<body>
<a href="http://www.baidu.com">test</a>
</body>
</html>
这几个伪类必须按照一定的顺序(l-v-h-a)，
a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的。
最后再强调一遍，书写顺序很重要：a:link - a:visited - a:hover - a:actived。
