来源: 吾推网
发布时间: 2018-03-31
次浏览
html部分：<a href="#" id="a">test</a>
css部分（正确顺序）：
body{
background: #000;
}
（顺序一）
（顺序一）
a:link{
color:blue
}
a:visited{
color:green
}
a:hover{
color:pink;
}
a:active{
color:red;
}
首先我们需要知道一点a伪类的权重是2和class一样
接下来我们分布了解下这4个伪类的意思：
a:link 表示未被访问的链接 （在页面上写了，还没有访问过）
a:visited 表示已经被访问过后的链接 （访问过了，注：判断是否访问过，是以浏览器的浏览记录为依据）
a:hover 表示鼠标指针位于其上的链接
a:active 表示活动链接 （当鼠标点下时的链接）
以上顺序是正确的顺序，所以肯定是没什么问题的
开始的时候是蓝色，因为页面没访问过
鼠标移上去是粉色
点下去不抬起来的时候是红色
抬起来后是绿色，因为已经访问过了
好接下来让我们把顺序打乱一下
伪类的顺序无论怎么换
都没有效果
永远是白色
这是为什么呢？
因为我设置了
#a{
color:white
}
它的权重是最高的
所以a永远都是白色
以上顺序是正确的顺序，所以肯定是没什么问题的
开始的时候是蓝色，因为页面没访问过
鼠标移上去是粉色
点下去不抬起来的时候是红色
抬起来后是绿色，因为已经访问过了
好接下来让我们把顺序打乱一下
body{
background: #000;
}
（顺序二）
（顺序二）
a:visited{
color:green
}
a:hover{
color:pink;
}
a:active{
color:red;
}
a:link{
color:blue
}
现在我把link伪类放最后了
这下我们再把鼠标放上去
会惊奇的发现
耶？怎么没效果了，
一直是蓝色
原因就是
这个顺序问题
为了形象点形容
我们打个比方
假设link是老大最高的一个
visited是老二第二高的一个
hover是老三第三高的一个
active是老四第四高的一个
现在让他们站成一排直线
当他们最高的站最后面
最矮的站最前面的时候
我们是不是能看到所有人的脸
当他们顺序一打乱
比如像顺序二
把老大放最前面了
是不是就会把后面全部人的脸都挡住了
只能看到老大蓝色的脸
好了，顺序问题就解释到这
第二个问题权重问题
我们前面说过
伪类的权重和class一样
现在我们把样式改下
现在我们会发现现在我把link伪类放最后了
这下我们再把鼠标放上去
会惊奇的发现
耶？怎么没效果了，
一直是蓝色
原因就是
这个顺序问题
为了形象点形容
我们打个比方
假设link是老大最高的一个
visited是老二第二高的一个
hover是老三第三高的一个
active是老四第四高的一个
现在让他们站成一排直线
当他们最高的站最后面
最矮的站最前面的时候
我们是不是能看到所有人的脸
当他们顺序一打乱
比如像顺序二
把老大放最前面了
是不是就会把后面全部人的脸都挡住了
只能看到老大蓝色的脸
好了，顺序问题就解释到这
第二个问题权重问题
我们前面说过
伪类的权重和class一样
现在我们把样式改下
body{
background: #000;
}
#a{
color:white
}
#a{
color:white
}
a:link{
color:blue
}
a:visited{
color:green
}
a:hover{
color:pink;
}
a:active{
color:red;
}
伪类的顺序无论怎么换
都没有效果
永远是白色
这是为什么呢？
因为我设置了
#a{
color:white
}
它的权重是最高的
所以a永远都是白色