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

最新推荐文章于 2022-08-12 08:32:24 发布

程序不了猿

最新推荐文章于 2022-08-12 08:32:24 发布

阅读量394

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_37730829/article/details/108117391

版权

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，或选择第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;
}

程序不了猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS的复合选择器——伪类选择器

伪类选择器伪类选择器用于向某些选择器添加特殊的效果，或选择第1个，第n个元素伪类选择器最大的特点是用冒号（：），比如 :hover、:first-child。因为伪类选择器很多，比如链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。链接伪类选择器关键字a:link /* 选择所有未被访问的链接*/a:visited /*选择说有已被访问的链接*/a:hover /*选择鼠标指针位于其上的链接*/a:active/*选择活动链接（鼠标按下未弹起的链接）*/使用方法，示例：
复制链接

扫一扫