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

  类选择器我们可以随意起名,而伪类选择器是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. android 布局学习

    各种layout用到的一些重要属性 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertic ...

  2. URL跳转的几种方式

    1.HTML: ①. <head> <!-- 以下方式只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" cont ...

  3. C/C++二维数组的用法

    二维数组在存储时按行优先连续存储,数组名是一个二维指针,如 int a[3][2] 中,a 是一个二维指针,而a[0],a[1],a[2]都相当于普通的一位数组的数组名,是一个固定值的指针. 二维数组 ...

  4. win2008使用FireDac连接ORACLE数据库问题

    2008上装DELPHI XE7,无论用FireDac 还是Ado都连不上ORACLE数据库 --------------------------- Debugger Exception Notifi ...

  5. HTML5 input placeholder 颜色修改

    在开发中遇到的一个小问题,记录下来./*placehodel*/ input:-ms-input-placeholder{color:#a9a9a9;}/* Internet Explorer 10+ ...

  6. ASP.NET导出文件FileResult的使用

    本文给大家讲一下ASP.NET MVC中如何使用FileResult来导出文件,首先网上相关例子有很多大神都有讲,我在这只是稍微说一点不同——为什么我的导出没有反应呢? 这个问题,我找了半天也没有找到 ...

  7. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  8. sqlalchemy ORM

    本节内容       ORM介绍     sqlalchemy安装     sqlalchemy基本使用     多外键关联     多对多关系   1. ORM介绍   orm英文全称object ...

  9. Js 拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  10. [转]html5音乐播放器

    http://files.cnblogs.com/files/xjyggd/html5music.rar import java.io.File;import java.util.ArrayList; ...