Web前端开发笔记之CSS拓展03——链接、焦点伪类选择器，属性选择器，精灵图

言行物恒

于 2022-03-23 14:07:19 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏： # Web前端开发——CSS拓展文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/HAC_SOUL/article/details/123683665

Web前端开发——CSS拓展专栏收录该内容

11 篇文章

订阅专栏

本文介绍了CSS中的链接伪类选择器（link、visited、hover、active）、焦点伪类选择器的应用，以及属性选择器在表单中简化样式的妙用。同时涵盖精灵图的背景定位技巧，帮助你优化网页呈现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.链接伪类选择器

使用：表示
：link 位访问的链接
：visited 已经访问过的链接会发生改变
：hover 鼠标移动到链接上会发生改变
：active 选定的链接

2.焦点伪类选择器

3.属性选择器

应用场景：当我们在表单中有多个input类型标签时，我们希望改变其样式。但是他们具有相同的标签名，而每一个都创建class又会觉得重复，此时就有属性选择器：

4.精灵图

在使用精灵图时，我们需要用到：

background-position属性：其对应两个坐标值，即水平方向和垂直方向。不过我们在设置详细坐标值时会发现需要将图片向左或向上移动时，需要使用负数。

代码如下：

.ticPic{
            width: 16px;
            height: 16px;
            background-image: url("/Res/video&photo/icomoon491.png");
            background-position:  -32px -178px;
        }

精灵图：