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

  类选择器我们可以随意起名,而伪类选择器是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. String 与StringBuilder有什么区别

    C# String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与 ...

  2. xib加载的两种方式

      •Xib文件的加载 Ø方法1 NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"AppView" owner:nil ...

  3. uboot命令

    uboot是怎么启动kernel的呢? 先熟悉一下uboot的命令吧. 首先是md, 查看内存. OpenJTAG> md 000000000: ea000014 e59ff014 e59ff0 ...

  4. PHP 将下划线命名 转换为 驼峰式命名

    function convertUnderline($str , $ucfirst = true) { $str = ucwords(str_replace('_', ' ', $str)); $st ...

  5. Codeforces 747C:Servers(模拟)

    http://codeforces.com/problemset/problem/747/C 题意:有n台机器,q个操作.每次操作从ti时间开始,需要ki台机器,花费di的时间.每次选择机器从小到大开 ...

  6. java 中MAP的按照进入顺序遍历与无序遍历

    public static void main(String[] args) { Map<String,String> map=new HashMap<String,String&g ...

  7. Topcoder SRM 683 Div2 B

    贪心的题,从左向右推过去即可 #include <vector> #include <list> #include <map> #include <set&g ...

  8. mkforsela

    -- #!/bin/bash #sela.gao # #History: # .根据每行查找出来的结果push进去手机 #result: # :没有编译生成文件 # :没有设置编译环境 echoMsg ...

  9. (转载)The One Sign You Will Be Rich-(by Brian de Haaff Founder and CEO Aha! -- world's #1 product roadmap software)

    When I was studying Philosophy at Berkeley, a friend told me that she could tell who was going to be ...

  10. 在Excel中制作复合饼图

    在Excel中插入饼图时有时会遇到这种情况,饼图中的一些数值具有较小的百分比,将其放到同一个饼图中难以看清这些数据,这时使用复合条饼图就可以提高小百分比的可读性. 文中的复合饼图只是方便以后记忆,故不 ...