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

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

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

  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的顺序去进行代码编写

前端学习 -- Css -- 伪类的更多相关文章

  1. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  2. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  3. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  4. 前端学习 -- Css -- 伪元素

    :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边,一般该伪类都会结合content一起使用,通过content可以向指定位置添加内 ...

  5. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  6. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  7. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  8. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  9. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

随机推荐

  1. JAVA之异常处理(一)

    JAVA之异常处理(一) 1.异常概述 在程序的开发过程中,可能存在各种各样的错误,有些错误是可以避免的,而有些错误却是意想不到的,在Java中把这些可能发生的错误称为异常.异常类的继承关系如下图. ...

  2. windows离线补丁包下载路径-云盾安骑士

    我们有一台阿里云服务器,只有内网可以访问,无外网资源. 阿里云账户邮箱反复收到阿里云云盾的漏洞报警通知,推荐安装安骑士组件. 安骑士组件是收费服务.阿里云服务器,无法连上外网,无法自动安装补丁.需要将 ...

  3. Beta版本互评

    基于NABCD评论作品,及改进建议 经过alpha发布之后,迫不及待的使用了psp daily这款软件,使用非常方便,基本的功能都可以实现,经过beta周之后,我对这款产品非常期待,希望能给我更友好的 ...

  4. 2017秋软工 —— 本周PSP

    1. PSP 2. PSP饼图 3. 累计进度条 4. 累计折线图

  5. ME.kkkK

    ME.kkkK 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 50 40 • Estima ...

  6. “吃神么，买神么”的第一个Sprint计划（第四天）

    “吃神么,买神么”项目Sprint计划 ——5.24  星期日(第四天)立会内容与进度 摘要:logo做出来了,但是在立会展示时遭到反对,不合格,重新设计.(附上失败的logo图) 目前搜索栏出来了, ...

  7. 3、第一个Python程序

    现在,了解了如何启动和退出Python的交互式环境,我们就可以正式开始编写Python代码了. 在写代码之前,请千万不要用“复制”-“粘贴”把代码从页面粘贴到你自己的电脑上.写程序也讲究一个感觉,你需 ...

  8. Keil C51与Keil ARM共存

    转自:http://blog.chinaunix.net/uid-20734916-id-3988537.html Keil和MDK共存,按照以下步骤:1 先安装 Keil C51,安装目录改为:&q ...

  9. [转帖]NVMe到底是什么？用它的SSD有啥优势？

    NVMe到底是什么?用它的SSD有啥优势? 2015-8-20 14:00  |  作者:Strike   |  关键字:NVMe,SSD,PCI-E SSD,超能课堂 分享到       有关注SS ...

  10. [学习]仿照cnblog 搭建 Oracle RAC 双节点 困.. 后续做不下去了..

    1. 学习地址: https://blog.csdn.net/yuzifen?t=1 2. 克隆之前创建好的虚拟机: 3. 给虚拟机增加新的硬盘. 注意事项 1) 必须是厚置备的磁盘才可以. 2) 必 ...