Skip to content

CSS伪类、CSS伪元素详解

定义

 
CSS伪类 用于向某些选择器添加特殊的效果。
CSS伪元素 用于将特殊的效果添加到某些选择器。

这TM不一样吗???

CSS中的类选择器(class)是为了方便过滤(选择)元素,给这类元素添加样式,class是定义在HTML文档树中的。但是这在一些情况下是不够用的,比如用户的交互动作(悬停hover、激活active等)会导致元素状态发生变化,class对这些动态变化无能为力。为此,CSS引入了伪类(pseudo-class)的概念用来支持根据文档树以外的信息来过滤元素的能力。

伪类是一个抽象类,本质上还是一个类,因此其主要作用仍然是用来选择元素而后设定具体的样式。伪类的选择对象可能会随着用户操作文档而发生变化,比如当用户删除某些节点后,会影响子元素(nth-child)伪类的选择。伪类选择元素的依据不是名称、属性或内容,而是根据特征(比如状态或顺序)。(:lang除外)

伪元素(pseudo-element)是另外一个概念,其设计意图和伪类一样,是为了能支持根据文档树以外的信息来进行格式化。伪元素本质上是一个元素,只是它一般需要依附在一个已有元素上,作为这个元素的“部分”或“补充”。比如::first-line或::after。CSS2.1规范中引入的新的伪元素语法是双冒号::,但为了和历史版本兼容,一些之前引入的伪元素仍然可以使用单冒号语法。

共同点

 
1.两者都不存在于HTML文档树中,都是为了支持依靠文档树之外的信息来进行格式化。
2.出于历史兼容性原因,一些在CSS2.1规范之前引入的伪元素使用和伪类一样的语法标记(单冒号:)。
3.伪类本质上和类相同,是用来选择过滤HTML元素的。只不过伪类是按动态特征过滤,而不是名称、属性或内容。
4.伪元素本质上和元素相同,是已有元素的某个部分或新创建的补充元素。伪元素上可以应用伪类选择器来过滤。

区别

 
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,也就是说,伪元素用来过滤内容或创建补充内容,需要在这些内容外包装一个虚拟的容器,然后应用特定的样式——这也是为什么他们一个称为伪类,一个称为伪元素的原因。这就是两者的根本区别:是否创造了新的元素。如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。
另外,伪类可以出现在选择器的任何地方,而伪元素只能添加在最后一个简单选择器之后。我们可以在伪元素上应用伪类。

实例

 
CSS伪类:(IE必须声明doctype,IE6支持a标签的部分)

:first-child IE8F2C4O9.6S3.1
:link IE7F2C4O9.6S3.1
:visited IE7F2C4O9.6S3.1
:hover IE7F2C4O9.6S3.1
:active IE7F2C4O9.6S3.1
:focus IE8F2C4O9.6S3.1
:lang IE8F2C4O9.6S3.1

CSS3增加的:IE9F3.5C4O9.6S3.2

:target
:enabled
:disabled
:checked
:indeterminate
:root
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
:not()

以下需要IE10F4C10O10S5

:valid
:invalid
:required
:optional

以下不被IE支持:F(-moz-)COS

:read-only
:read-write
:in-range
:out-of-range

CSS伪元素:

:first-line IE9F1C1O7S1
:first-letter IE9F1C1O7S1
:before IE9F3.5C4O7S3.1
:after IE9F3.5C4O7S3.1

兼容的单冒号伪元素:

:first-line IE5.5F1C1O5.5S1
:first-letter IE5.5F1C1O5.5S1
:before IE8F3.5C4O4S3.1(IE8必须声明doctype)
:after IE8F3.5C4O4S3.1(IE8必须声明doctype)

扩展阅读:
w3c在css2.1中对伪类和伪元素的描述
w3c在css2.2中对伪类和伪元素的描述
w3c在css3中对伪元素的描述
w3c在css3中对伪类的描述

插播一个征婚广告~~

也是受朋友之托。

>_<

女,运营妹,23岁,未婚,身高167cm,体重48KG,山东青岛。

目前在阿里巴巴工作,负责支付宝相关业务,工号 519720401 支付宝搜索工号可见照片。

漂亮大方,爱好读书、健身、游泳、吃鸡。

青岛有房一套,有车。

父母退休,家庭不拜金、人务实,一直没有合适的男朋友。

她本人要求不高,只要对她真心好就行。

 

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

{ 1 } Trackback

  1. […] 伪类和伪元素 […]

发表评论

Your email is never published nor shared. Required fields are marked *


TOP