CSS3中的伪类选择器详解
类选择器和伪类选择器区别
类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名。
伪类选择器以及伪元素
我们把它放到这里
p.aaas{
text-align: left;
color: red;
}
它同样的会被选择
最常见的伪类选择器
未被访问的链接
a:link{ color: #ff6600 } /* 未被访问的链接 */
我们来测试一下,我们给它添加一个超链接。
伪类选择器
我们给这个伪类选择器,选定样式,第一种
a:link{
color: #000;
}
link它是表示的未被访问的链接
已被访问的链接
a:visited{
color: fuchsia;
}
然后是我们鼠标放上去的,一个颜色。
a:hover{
color :green;
}
当我们鼠标放上去的时候变成绿色。还有一个是当我们鼠标,正在被点击的时候。
a:active{
color: #ff6600;
}
就会显示橙色,这样就定义了一个伪类,当我们这个链接还没有访问的时候它就是黑色,当我们这个链接已经访问过后,在返回这个页面的时候呢,这个链接的颜色呢就会变成紫色,当我们鼠标经过它的时候呢,它就会变成绿色,当我们点击的时候,就是我们鼠标左键点下去,但并没有弹回来的时候呢它就会变成橙色。好那么我们来看一下效果。
现在是这样的一个颜色,是紫色。紫色就表示我们已经访问过了。因为我们现在正在返回这个页面,那么在这里我们可以来更改一下,改成index1。
伪类选择器
因为index1不存在所以就不会存在被访问了。
那么在没有访问是之前呢是黑色link,当我们的这个鼠标移动上去的话
会变成绿色,当我们鼠标点击下去但是并没有松开,会变成
橙色。当我们松开之后呢它会访问,访问之后它就会变成紫色。我们新建一个页面index1,那这样单击之后再返回的时候就变成紫色的了。这就是伪类。
原文链接:http://www.maiziedu.com/wiki/css3/selector/
CSS3中的伪类选择器详解的更多相关文章
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- css3中的伪类选择器
一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
- CSS3中only-child伪类选择器
<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...
- CSS3的一个伪类选择器:nth-child()
CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...
- Delphi中的线程类 - TThread详解
Delphi中的线程类 - TThread详解 2011年06月27日 星期一 20:28 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉都有说到,但基本 ...
- MFC中文件对话框类CFileDialog详解及文件过滤器说明
当前位置 : 首页 » 文章分类 : 开发 » MFC中文件对话框类CFileDialog详解及文件过滤器说明 上一篇 利用OpenCV从摄像头获得图像的坐标原点是在左下角 下一篇 Word中为 ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
随机推荐
- 今天携程出事了:让我们来学习下http的响应码
就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...
- Djunit工作记录Mock时出现为null的情况setReturnValueAt|MockObjectManager.addReturnValue不起作用
最近工作要对代码进行局部测试并编写测试文档,可是偶的环境还没搞好哦(开始不太乐意直接请教前辈,还是选择自己先搞一下了)经过电脑重装jdk ,eclipse,djunit工具包ver***,等等确定不是 ...
- Gap Buffer
From codeproject: http://www.codeproject.com/Articles/20910/Generic-Gap-Buffer
- qt qml qchart 图表组件
qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...
- OC-03类的声明和实现
例子 //类名:Car//属性:轮胎个数.时速//行为:跑 #import<Foundation/Foundation.h >//完整的写一个函数:函数的声明和定义(实现)//完整的写一个 ...
- jade模板
jade 模板使用 npm install jade -g 安装到全局 jade index.jade 导出一个 index.html 压缩后的 jade -P index. ...
- Android 获取渠道名称
直接看代码, //获取渠道名称public static String getChannelName(Activity ctx) { if (ctx == null) { return null; } ...
- PXC(percona xtradb cluster)新加节点避免SST的方法
环境: node1:192.168.0.100 pxc节点 node2:192.168.0.101 新节点 把新加入的节点先建立为node1的从库,可以使用mysqldump或innobackup ...
- cocos2dx UI总结
1.a->addChild(b); 如果b是一个layer,则默认是忽略锚点的,此时无论你怎么设置它的锚点都没用,必须先b->ignoreAnchorPointForPosition(fa ...
- oracle游标透彻详解分析
主:本文来自:http://www.cnblogs.com/huyong/archive/2011/05/04/2036377.html 4.1 游标概念 4.1.1 处理显式游标 4.1.2 处理隐 ...