一、常用伪类解释
1、:link伪类选择器
该伪类选择器是选择所有未被访问的链接,只可选中没有被访问过的链接标签,更改或者赋予该标签CSS样式,已经被访问过的标签或者其它非链接标签的样式将不会被更改
2、:visited伪类选择器
:visited伪类选择器是选择所有已被访问的标签并对其CSS样式进行更改或者设置,和:link选择器一样无法选择非链接类标签且不选则未访问过的链接
3、:hover伪类选择器
选择鼠标位于其上的元素,即用来编辑当浏览页面时鼠标移到内容时的页面样式
4、:active伪类选择器
选择活动元素,即鼠标按下未弹起的元素,用于设置鼠标按下状态时所页面的CSS样式
5、:focus伪类选择器
:focus伪类选择器用于获得焦点的表单元素,焦点就是光标,一般情况只有<input>类表单才能获取,因此这类选择器主要针对表单元素来说,当鼠标移入选中输入框时即为聚焦,:focus选择器选中该表单元素,该伪类选择器下的CSS样式生效,当鼠标离开输入框时即为失焦,:focus选择器下的CSS样式因没有元素被选中而不被使用
二、上述伪类选择器代码示例
HTML代码
<a href="../360截图2.0.exe" class="non">未被访问的链接文本颜色为绿色(该链接没有被点击过)</a>
<a href="./" class="yep">访问过的链接文本颜色为红色(该链接没已经点击过)</a>
<div class="ho">鼠标位于元素上文本颜色变为蓝色</div>
<div class="ac">鼠标按下不放开元素文本颜色变为红色</div>
<input type="text" class="put" value="鼠标移入输入框输入框背景颜色变为蓝色">
CSS代码
a {
text-decoration: none;
}
.non:link {
color: green;
}
.yep:visited {
color: red;
}
.ho:hover{
color: blue;
}
.ac:active{
color: red;
}
.put:focus{
background-color:rgb(99, 99, 244);
}