伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,或选择第1个,第n个元素
伪类选择器最大的特点是用冒号(:),比如 :hover、:first-child。
因为伪类选择器很多,比如链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
链接伪类选择器
关键字
a:link /* 选择所有未被访问的链接*/
a:visited /*选择说有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active/*选择活动链接(鼠标按下未弹起的链接)*/
使用方法,示例:
<body>
<a href="#">aaaaaaaaaaaaaaaaaaa</a>
<style>
/* 未访问的链接a:link 把没有点击过的(未访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接a:visited */
a:visited {
color: orange;
}
/* 鼠标经过的链接 a:hover*/
a:hover{
color: blue;
}
/* 鼠标按下未弹起的链接 a:active */
a:active {
color: green;
}
</style>
</body>
注意事项
1.为了确保生效,请按照LVHA的顺序声明:link, :visited, :hover, :active.
2.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独制定样式。
:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
示例:
input:focus {
background-color:yellow;
}