类选择器和伪类选择器区别

  类选择器我们可以随意起名,而伪类选择器是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中的伪类选择器详解的更多相关文章

  1. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  2. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  3. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

  4. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  5. CSS3中only-child伪类选择器

    <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...

  6. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...

  7. Delphi中的线程类 - TThread详解

    Delphi中的线程类 - TThread详解 2011年06月27日 星期一 20:28 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉都有说到,但基本 ...

  8. MFC中文件对话框类CFileDialog详解及文件过滤器说明

    当前位置 : 首页 » 文章分类 :  开发  »  MFC中文件对话框类CFileDialog详解及文件过滤器说明 上一篇 利用OpenCV从摄像头获得图像的坐标原点是在左下角 下一篇 Word中为 ...

  9. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

随机推荐

  1. CentOS6配置国内yum源

    在安装完CentOS后为了加快安装.更新rpm包的速度.需要将yum源改为国内源,国内比较快的源有中科大.163.sohu源.下面修改为163源为例子: 首先进入源的配置目录:执行 cd /etc/y ...

  2. Javascript之confirm的用法

    confirm函数 confirm函数用于提供确认功能,它首先显示给定的message参数所包含的信息,并提供两个可选择的回答“ok”和“cancel”,然后等待用户选择其中的一个.如果用户选择“ok ...

  3. 【数论】X problem

    X problem      X问题     Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

  4. Sublime一键预览

    //chrome{ "keys": [ "f12" ], "command": "side_bar_files_open_with ...

  5. 货运APP雨后春笋 传统物流模式将被改变

    移动互联网正在改变我们的生活方式,各种手机APP充斥着人们的生活,物流行业也不例外.货运APP的出现,对于物流行业是一个提升的机会,也是迈向标准化和专业化的一个有效途径.有专家预测,这将为物流行业的发 ...

  6. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  7. 一个前端引用Facebook评论插件案例

    最近公司海外的同事提了一个新的需求:那就是将Facebook的评论系统接入到公司海外网站的资讯详情页. 下面做一个简单的介绍: 首先我们登录到Facebook开发者平台:然后进入评论插件系统(http ...

  8. python :模态对话框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. android 补间动画和Animation

    介绍: 补间动画是一种设定动画开始状态.结束状态,其中间的变化由系统计算补充.这也是他叫做补间动画的原因. 补间动画由Animation类来实现具体效果,包括平移(TranslateAnimation ...

  10. Android drawable微技巧

    家都知道,在Android项目当中,drawable文件夹都是用来放置图片资源的,不管是jpg.png.还是9.png,都可以放在这里.除此之外,还有像selector这样的xml文件也是可以放在dr ...