前端学习 -- Css -- 伪类

简介: 伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类  为没访问过的链接设置一个颜色为绿色 :link  表示普通的链接(没访问过的链接)。

伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置

比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类

 

 为没访问过的链接设置一个颜色为绿色 

  1. :link  表示普通的链接(没访问过的链接)。
  2. :visited  表示访问过的链接,浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色。
  3. :hover 伪类表示鼠标移入的状态。
  4. :active 表示的是超链接被点击的状态,:hover和:active也可以为其他元素设置,IE6中,不支持对超链接以外的元素设置:hover和:active。
  5. ::selection为类 选中的内容使用样式,注意:这个伪类在火狐中需要采用另一种方式编写::-moz-selection。

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        /**
         * 没有访问的
         */
        
        a:link {
            color: red;
        }
        /*
         * 访问过的
         */
        
        a:visited {
            color: black;
        }
        /*鼠标移入的时候
         * 
         */
        
        a:hover {
            color: yellow;
        }
        /**
         * 点击超链接的时候的颜色
         */
        
        a:active {
            color: blue;
        }
        /**
         * 选中文字的时候背景颜色变为红色
         */
        
        h1:selection {
            background-color: red;
        }
    </style>

    <body>
        <a href="http://http://www.cnblogs.com/androidsuperman/p/6545291.html">访问过的链接</a>
        <br/>
        <a href="http://www.cnblogs.com/androidsuperman/p/6563756.html">没有访问过的链接</a>
        <h1>选中文字的时候的颜色</h1>
    </body>

</html>

效果:

没有访问的:

访问过的:

鼠标移入:

 

伪类的优先级

顺序依次是:

  1. :link;
  2. :visited;
  3. :hover;
  4. :active;

:link,:visited可以交换位置,但是位置不能放到:hover,:active后面。

 :hover:active不可以交换位置。

当然最好按照如上1,2,3,4的顺序去进行代码编写

相关文章
|
22天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
41 4
|
1月前
|
前端开发
web前端-------伪类和伪元素
web前端-------伪类和伪元素
17 0
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
15天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
20天前
|
前端开发 JavaScript Java
通过学习mayfly,我学会了前端如何优雅设计字典值
`shigen`是一位擅长多种编程语言的博主,他在探索[mayfly-go](https://juejin.cn/post/7319365035552309248)项目后,发现了对枚举值管理的优雅设计。他分享了如何将字典和枚举值结构化,使用Vue+typescript实现更易维护的代码。通过创建`TagType`和`EnumValue`类,以及提供静态方法,实现了模块化和简洁的字典处理。示例展示了如何在页面中高效引用和显示字典数据,提高了代码的可读性和可维护性。
17 3
通过学习mayfly,我学会了前端如何优雅设计字典值
|
23天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
9 0
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
N..
|
1月前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
7 0