总结在前:

0. 参考资料

1. 伪类和伪元素是不同的两种东西。

2. 伪类和伪元素都属于CSS选择器。

3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息,i.e. 段落的第一行,的格式化。

4. 伪类和伪元素都不出现在源文件和文档树中。

  伪类:一开始单单只是用来表示一些元素的动态状态,典型的是<a>的 LVHA四个状态,CSS2标准扩展了概念范围, 使其成为了所有逻辑上存在,但在文档树中却无须标识的分类。

伪元素:代表某个元素的子元素,虽然这个子元素在逻辑上存在, 但是不存在于文档树中。

 

5. CSS3中为区分二者使用冒号,但是还没有完全实现,目前都是单冒号:

  -- 伪类用一个冒号 :first-child

  -- 伪元素用两个冒号  ::first-line

详细一点谈:

参考资料

  在CSS中可以将类选择器视为正则中的模式, div.value  等同于  div[class~=value]  ,CSS中的样式通常依附于一个元素在文档树中的位置,这个模型对于大多数情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构,如first-line,没有简单的CSS选择器可以应用到它,而且它也是动态变化的。

  伪类: 伪类对元素的划分是基于特征的,而不是基于他们的名字、属性或者内容,原则上特征是不可以从文档树中推断得到的(那是怎么实现的呢?)。伪类可以是动态的,在用户和文档进行交互的时候,一个元素可以得到或者失去一个伪类。  :first-child  和  :lang  某些情况可以用文档树推断,是例外。伪类有: :first-child, :link, :vistited, :hover:, active:focus, :lang

   伪元素:创造关于文档语言能够制定的文档树之外的抽象。 如: 文档语言不能提供访问元素内容的第一个letter或者第一行的机制,而使用伪元素可以办到。伪元素还给不存在源文件中的内容分配样式,i.e.  :before 和 :after

  伪类可以独立于文档的元素来分配样式,而且可以分配给任何元素(最常见的是 a 元素,也可以应用到其他元素上如  li ),逻辑上和功能上和类类似(i.e.都有匹配的作用),但是其是预定义的,不存在于文档树中且表达方式也不同,所以叫伪类。

  伪元素所控制的内容和一个元素控制的内容是一样的, 但是伪元素不是真正的元素,不存在于文档树中(可以动态添加到文档中), 不是真正的元素。

CSS 伪类和伪元素--pseudo的更多相关文章

  1. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  2. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  3. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  6. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  7. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  8. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  9. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

随机推荐

  1. Java经典练习题_Day04

    一.选择题 1. 下列关于数组的说法正确的是:(A) A. 在Java中数组的长度是可变的 B. 数组中存储的数据的类型是相同的 C. 数组在进行扩容操作的时候源数组的地址不发生改变 D. int[] ...

  2. 操作系统-百科:Linux

    ylbtech-操作系统-百科:Linux Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNI ...

  3. zookeeper基本讲解(Java版,真心不错)

    1. 概述 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 它有如下的一些特点: 简单 Zookeeper的核 ...

  4. 使用被动混合内容的方式来跨越浏览器会阻断HTTPS上的非安全请求(HTTP)请求的安全策略抓包详解

    /*通过传入loginId在token中附加loginId参数,方便后续读取指定缓存中的指定用户信息*/ GET /multitalk/takePhone.php?loginId=4edc153568 ...

  5. 温故而知新-WebSocket 教程

    一.为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有 ...

  6. 有关DotNetBar设计样式和运行时的样式不一致的问题

    可以在 窗体类构造函数的InitializeComponent后加上下面圈出的内容:  this.EnableGlass = false; 参考文章 DotNetBar如何控制窗体样式

  7. django html模板继承 {%block 标记名} {%endblock%}

    对于url文件 url(r'^tp1/', views.tp1) 对于views文件,跳转到tp1.html 同时将list列表传到前端 def tp1(request): list = [1, 2, ...

  8. Sublime Text:初学者不知道的那些事

    来源:Duchessjojo@译言 我是Sublime Text代码编辑器的忠实粉丝.我和诸多Mac程序员一样,最初使用的是Textmate代码编辑器.在Sublime Text 2发行后,我才开始转 ...

  9. JBPM4.4学习笔记

    1.JBPM4表说明: JBPM4_DEPLOYMENT 流程定义表 JBPM4_DEPLOYPROP 流程定义属性表 JBPM4_EXECUTION 流程实例表 JBPM4_HIST_ACTINST ...

  10. Java并发编程之——Amino框架

    Amino框架是一个采用无锁方式实现并行计算的框架,可惜的是,网上关于Amino框架的介绍甚少.根据所掌握的资料,稍微总结一下: 1. 锁机制到无锁机制 锁机制可以确保程序和数据的线程安全,但是锁是一 ...