CSS之选择器（四）动态伪类选择器

码、蚁

已于 2022-05-11 22:36:38 修改

阅读量1k

点赞数 1

分类专栏： web 文章标签： css css3 前端 html

于 2022-05-10 21:30:30 首次发布

本文链接：https://blog.csdn.net/qq_46675014/article/details/124670078

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前面学习了普通选择器、复合选择器、属性选择器和伪类选择器，下面学习最后一种选择器-动态伪类选择器

锚伪类选择器 / 动态伪类选择器

下面来详细说说动态伪类选择器的使用方式，废话不多说，上表格和代码

动态伪类选择器
选择器	示例	示例说明
：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-hover-active-visited的顺序

代码展示

<!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>

代码效果：

未点击的链接样式

鼠标移入时的链接样式

鼠标点击时的链接样式

已被访问过的链接样式

下面再补充下选择器的权重，也就是说用不同选择器选中同一个标签设置样式，最终会使用哪个选择器的样式

选择器权重
选择器	优先级
!important	最高
内联样式	1000
id选择器	100
类和伪类选择器	10
元素选择器	1
通配选择器	0

总结：

        1、如果优先级一样，则使用位置靠下的样式

        2、比较选择器优先级是将所有选择器的优先级相加比较

        3、同级的所有选择器优先级相加不会超过上一级选择器优先级

到这里，CSS选择器部分的知识点就结束了……

码、蚁

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
CSS之选择器（四）动态伪类选择器

前面学习了普通选择器、复合选择器、属性选择器和伪类选择器，下面学习最后一种选择器-动态伪类选择器锚伪类选择器 / 动态伪类选择器下面来详细说说动态伪类选择器的使用方式，废话不多说，上表格和代码动态伪类选择器选择器示例示例说明：link a：link 未访问过的a链接：visited a：visited 访问过的a链接：hover div：hover 鼠标移入div时的效果：active div：acti.
复制链接

扫一扫