CSS的复合选择器——伪类选择器

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,或选择第1个,第n个元素
伪类选择器最大的特点是用冒号(:),比如 :hover、:first-child。
因为伪类选择器很多,比如链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

关键字

a:link /* 选择所有未被访问的链接*/
a:visited /*选择说有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active/*选择活动链接(鼠标按下未弹起的链接)*/

使用方法,示例:

<body>
    <a href="#">aaaaaaaaaaaaaaaaaaaa>

    <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;
}

你可能感兴趣的:(css样式,css,css3)