前端学习 -- Css -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
为没访问过的链接设置一个颜色为绿色
- :link 表示普通的链接（没访问过的链接）。
- :visited 表示访问过的链接，浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色。
- :hover 伪类表示鼠标移入的状态。
- :active 表示的是超链接被点击的状态，:hover和:active也可以为其他元素设置，IE6中，不支持对超链接以外的元素设置:hover和:active。
- ::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>
效果：
没有访问的：
访问过的：
鼠标移入：
伪类的优先级
顺序依次是：
- :link；
- :visited；
- :hover；
- :active；
:link，:visited可以交换位置，但是位置不能放到:hover，:active后面。
:hover:active不可以交换位置。
当然最好按照如上1,2,3,4的顺序去进行代码编写
前端学习 -- Css -- 伪类的更多相关文章
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 深入学习css伪类和伪元素及其用法
前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...
- 前端学习 -- Css -- 伪元素
:first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边,一般该伪类都会结合content一起使用,通过content可以向指定位置添加内 ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- 谈谈css伪类与伪元素
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...
- css伪类实现文字两侧划线效果
css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
随机推荐
- Spring学习（4）IOC容器配置bean：定义与实例化
一. IOC容器配置 1. 一些概念 (1)IOC容器: 定义:具有管理对象和管理对象之间的依赖关系的容器. 作用:应用程序无需自己创建对象,对象由IOC容器创建并组装.BeanFactory是IO ...
- vue 动画
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下几种常见的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate ...
- Hyperledger Fabric 1.0.1至Hyperledger Fabric 1.0.5所升级的内容及修复的问题
基础更新 各版本每次迭代都会有一些基础更新内容,如文档修改覆盖.测试用例完善.用户体验改进及删除冗余无效代码等… 下面分类介绍的是一些版本迭代的重要更新内容,因个人实操和理解有限,部分更新并未明确,如 ...
- 基本数据结构 -- 栈简介（C语言实现）
栈是一种后进先出的线性表,是最基本的一种数据结构,在许多地方都有应用. 一.什么是栈 栈是限制插入和删除只能在一个位置上进行的线性表.其中,允许插入和删除的一端位于表的末端,叫做栈顶(top),不允许 ...
- python3.6环境中django2.0与xadmin0.6结合的后台管理
1.xadmin简介 django的admin管理后台页面很简洁,对个人来说做后台管理非常简单:xadmin的比较admin优化界面,看着也舒服. xadmin界面效果如下: 2.xadmin安装 从 ...
- getField()与getDeclaredField()的区别
Java的反射机制中,用Class的getField(String name)或getDelaredField(String name)可以得到目标类的指定属性,返回类型是Field. 但这两个是有区 ...
- 满帮集团CEO：未来将向“智慧型”公司转变，要成为一家生态公司
谁都想成为下一个滴滴.显然,王刚也希望在物流业,货车帮与运满满在合并后,能够企及滴滴的高度. 货车帮与运满满,都曾是货运物流领域的翘楚,也因为业务的竞争关系有过水火不容厮杀.但最终还是在资本与地方政府 ...
- 记一次线上gc调优的过程
近期公司运营同学经常表示线上我们一个后台管理系统运行特别慢,而且经常出现504超时的情况.对于这种情况我们本能的认为可能是代码有性能问题,可能有死循环或者是数据库调用次数过多导致接口运行 ...
- iOS静态库.a总结（2017.1.24增加脚本打包方法）
修改于:2017.1.24 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.根据源代码的公开情况,库可以分为2种类型 a.开源库 公开源代码,能看到具体实现 ,比如SDWebImag ...
- PHP中的文件包含
在PHP中,包含文件有两种方式:include和require.这两种方式的功能一样,只有一个区别,就是使用require包含一个文件时,如果出现错误,脚本不会继续执行:而如果使用include包含, ...