伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用号(:)表示,比如 :hover、 :first- child……

因为伪类选择器很多,比如有链接伪类、结构伪类、表单伪类等等。

链接伪类选择器

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

写法:

a:link {
        color: #333;
        text-decoration: none;
}

a:visited {
        color: orange;
}

a:hover {
        color: pink;
}

a:active {
        color: blue;
}

写法注意事项:

为了确保生效,请按照LVHA的循顺序声明:link :visited :hover :active

因为a链接在浏览器中具有默认样式,所以在实际开发中都需要给链接单独指定样式

实际开发中常用写法:

a {
   color: #333;
   text-decoration: none;
}

a:hover {
   color: blue;
}

表单元素伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。(加此选择器,可以将选中的表单输入框变色高亮显示)

焦点就是光标,一般情况< input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说的。

写法:

input:focus {
    color: red;
    background-color: yellow;
}

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

邮箱地址不会被公开。

微信