超链接伪类和文本阴影
超链接伪类和文本阴影
1、超链接伪类
为超链接不同的状态设置不同的样式
- 仅
a元素使用
:link未访问的超链接，可设置颜色、字体大小
:visited已访问的超链接，由于隐私的原因，visited这个伪类只能修改链接的颜色 所有元素都可以使用：
:hover鼠标移入时状态变化
:active鼠标点击（但未松开）时状态变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*默认颜色为黑，去超链接下划线*/
a{
text-decoration : none;
color : #000000;
}
/*超链接伪类
1.鼠标悬浮颜色 a:hover
2.激活状态（鼠标单击不释放）颜色 a:active
3.未访问链接颜色 a:link
4.已访问链接颜色 a:visited
由于隐私的原因，visited这个伪类只能修改链接的颜色
*/
a:link{
color : red;
}
a:visited{
color : blue;
}
a:hover{
color : orange;
}
a:active{
color : pink;
}
</style>
</head>
<body>
<a href="#">
<img src="images/你懂得.jpg" alt="显示失败了" width="300" height="180">
</a>
<p>
<a href="https://www.baidu.com">点击此处"寓教于乐"</a>
</p>
<p>
<a href="https://www.cnblogs.com/xypersonal/">点击此处和我"讨论"</a>
</p>
<p>$20</p>
</body>
</html>
生成页面效果
- link,visited
- hover
- active
- 关于超链接四个伪类的顺序问题
四个伪类的顺序很重要，按照css规则，同一个元素的选择器，后面的样式覆盖前面的，link和visited的顺序可以随意一点。 但也要在前面。
visited要放在hover前面，如果hover在visited的前面，并且visited已经被访问过，则当鼠标再次悬停的时候， visited的颜色会覆盖hover的颜色，不能看到颜色变化，同理，active也应该放到visited后面
再看hover和active,触发active前会先触发hover,如果active在前，不管如何，hover的颜色会覆盖active的颜色
所以正确的顺序应该是LVHA
- 关于a:link
会出现链接伪类选择器中link颜色调试不出来的情况(a:link)
很多人也遇到过这个问题，链接：
https://blog.csdn.net/m0_45142186/article/details/118970561
https://blog.csdn.net/cvper/article/details/79445441
真正的原因应该是：因为浏览器自带访问记录，只要点过未访问链接一次，浏览器就会记录下来，该链接当然就不会是未访问的红色了。
2、文本阴影 text-shadow
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow : #3cc7f5 2px 2px 2px ;
}
<p id="price">$20</p>
3、附录：学习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*默认颜色为黑，去超链接下划线*/
a{
text-decoration : none;
color : #000000;
}
/*超链接伪类
1.鼠标悬浮颜色 a:hover
2.激活状态（鼠标单击不释放）颜色 a:active
3.未访问链接颜色 a:link
4.已访问链接颜色 a:visited
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:link{
color : red;
}
a:visited{
color : blue;
}
a:hover{
color : orange;
}
a:active{
color : pink;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow : #3cc7f5 2px 2px 2px ;
}
</style>
</head>
<body>
<a href="#">
<img src="images/你懂得.jpg" alt="显示失败了" width="300" height="180">
</a>
<p>
<a href="#">点击此处"寓教于乐"</a>
</p>
<p>
<a href="#1">点击此处和我深入讨论</a>
</p>
<p id="price">$20</p>
</body>
</html>
