css中的锚伪类

作者: 不会潜水的猫小喵 | 来源:发表于2019-04-10 17:35 被阅读0次

CSS进阶知识点--CSS3伪类选择器和伪元素
css中的锚伪类
大前端——知识点回顾（CSS）
伪类选择器、清除浮动
CSS选择器
09 第九章百花齐放的选择器
伪类
伪元素和伪类
web学习:01-CSS3选择器(伪类选择器)
CSS3选择器--结构性伪类选择器

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>