◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
css--伪类选择器
原创
stpevenchow
84°c
2019年09月30日 23:31
php学习笔记
0条评论
1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
移步手机端
1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/* :hover当鼠标划过时，则显示css的样式
:link未被访问的超链接
：visited被访问过得超链接
：active被鼠标点击瞬间--就是鼠标左击按住不动
*/
.a1:link{
color: pink;
/* font-weight: bold; */
}
.a2:visited{
color: red;
}
.a3:hover{
color: green;
font-weight: bold;
}
.a4:active{
color: black;
font-weight: bold;
}
.span1{
color: pink;
}
.span2:focus{
font-weight:bold;
}
.span3:hover{
font-weight: bold;
color: red;
}
.span4:active{
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div class="span1">
<h1>html标签的四个状态</h1>
</div>
<div>
<span class="span1">普通状态</span>
<br>
<span class="span2">鼠标焦点，不适用于div</span>
<br>
<span class="span3">鼠标经过</span>
<br>
<span class="span4">鼠标点击</span>
</div>
<a href="http://www.baidu.com" class="a1">未访问</a>
<br>
<a href="http://www.baidu.com" class="a2">已访问</a>
<br>
<a href="http://www.baidu.com" class="a3">鼠标经过</a>
<br>
<a href="http://www.baidu.com" class="a4">鼠标点击</a>
<!-- 注意事项
1、未被访问的超链接，是按照href的属性值是否有被访问过而不是看标签
2、超链接的伪类有4个，如果需要同时设定多个伪类选择器，需要按照顺序设定来写--未访问--已访问--鼠标经过--鼠标点击
-->
<br>
<input type="text" name="" value ="普通状态下字体颜色"class="span1">
<br>
<input type="text" name="" value="鼠标焦点下的字体颜色"class="span2">
<br>
<input type="text" name="" value="鼠标经过的字体颜色" class="span3">
<br>
<input type="text" name="" value="鼠标点击时的字体颜色" class="span4">
<!-- 注意事项
1、在使用focus时顺序最好还是不要改变
2、：focus鼠标焦点伪类选择器不是所有标签都可以加载的一般是input，textarea，button，submit ....
-->
</body>
</html>
欢迎阅读本文，如果本文对您有所帮助，记得收藏/转发☺
本文链接：http://stpeven.com/post/120.html
版权声明：本文为原创文章，版权归 stpevenchow 所有，欢迎分享本文，转载请保留出处！
