前面学习了普通选择器、复合选择器、属性选择器和伪类选择器,下面学习最后一种选择器-动态伪类选择器
锚伪类选择器 / 动态伪类选择器
下面来详细说说动态伪类选择器的使用方式,废话不多说,上表格和代码
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 未访问过的a链接 |
:visited | a:visited | 访问过的a链接 |
:hover | div:hover | 鼠标移入div时的效果 |
:active | div:active | 鼠标点击div时的效果 |
注意:
1、:link 和:visited 只对a标签有效果,而:hover 和 :active 对所有标签都有效果
2、如果要同时设置这4个伪类,那么必须按照link-visited-hover-active的顺序
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态伪类选择器</title>
<style>
div{
border: 1px solid black;
width: 300px;
height: 50px;
}
a:link{
color: rgb(75, 9, 255);
}
a:hover{
color: rgb(166, 255, 0);
}
a:active{
color: rgb(255, 0, 0);
}
a:visited{
color: brown;
}
</style>
</head>
<body>
<div>
<a href="#">人生无常</a>
</div>
</body>
</html>
代码效果:
![229e8096e7d14383b988ebe76d1def7b.png](https://i-blog.csdnimg.cn/blog_migrate/74a434538e5643a6a6d7949090725296.png)
未点击的链接样式
![cf572fd4bba54f4ba4f65e9ddc9df365.png](https://i-blog.csdnimg.cn/blog_migrate/3b7cfea11e6df0485c9978c112fcce26.png)
鼠标移入时的链接样式
![73468aef0469431c934f5260dedcd593.png](https://i-blog.csdnimg.cn/blog_migrate/248765850a6d4021798c7db5a9e785c0.png)
鼠标点击时的链接样式
![4bdda041025c4a4c8a01bc1f13b398cf.png](https://i-blog.csdnimg.cn/blog_migrate/eabcbaf80cff16c1a16684d1b8fc8bfe.png)
已被访问过的链接样式
下面再补充下选择器的权重,也就是说用不同选择器选中同一个标签设置样式,最终会使用哪个选择器的样式
选择器 | 优先级 |
---|---|
!important | 最高 |
内联样式 | 1000 |
id选择器 | 100 |
类和伪类选择器 | 10 |
元素选择器 | 1 |
通配选择器 | 0 |
总结:
1、如果优先级一样,则使用位置靠下的样式
2、比较选择器优先级是将所有选择器的优先级相加比较
3、同级的所有选择器优先级相加不会超过上一级选择器优先级
到这里,CSS选择器部分的知识点就结束了……