最新消息:发现真没时间折腾VPS,最近又换了个空间。呵呵

CSS伪类和伪元素

在CSS中经常提到伪类和伪元素,那两者到底是什么?两者又有什么区别呢

伪类是什么

伪类的英文是Pseudo-classes,它在W3C的官方网站上的介绍如下:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

(我英文不太好,大概的意思如下)
创建伪类是为了选择那些文档树中不存在的、那些很难用其它简单的选择器选择的信息。
伪类通常用半角冒号(:)加上伪类名来声明,其后直接用大括号写CSS值。

伪元素是什么

伪类的英文是Pseudo-elements,它在W3C的官方网站上的介绍如下:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

创建伪元素是选择文档树上比文档语言记载的更加抽象的信息。比如,文档语言就没描述首文字和首行。对伪元素来说,它可以访问那些本来无法访问的信息(如:first-line, first-letter※译者注),也可以访问那些本来就不存在的内容(如:before, after)。伪元素一般是在伪元素名前加两个半角冒号(::)(在CSS2以前的版本中,伪元素也是用一个冒号的※译者注)。

伪类和伪元素的区别

我看了半天W3C的文档,也没看明白这两者的区别,在网上了一下,发现在葵中剑@剑空的博客里说得还算比较明白。

自己总结了一下,两者的区别如下:

伪类只能选择元素(或者说HTML节点),这点它和普通的类一样。而伪元素只能选择元素(或者说HTML节点)里的内容。

伪类列表

CSS3支持的伪类如下:

属性描述CSS
:active向被激活的元素添加样式。1
:focus向拥有键盘输入焦点的元素添加样式。2
:hover当鼠标悬浮在元素上方时,向元素添加样式。1
:link向未被访问的链接添加样式。1
:visited向已被访问的链接添加样式。1
:first-child向元素的第一个子元素添加样式。2
:lang向带有指定 lang 属性的元素添加样式。2
:targetURL里锚标记的元素3
:checked选中的CheckBox和RadioBox3
:root指最高层的节点,一般是HTML3
:nth-child()里面可以写n的表达式,可以选择表达式计算出来的第几个子项3
:nth-last-child()里面可以写n的表达式,可以选择表达式计算出来的从后数的第几个子项3
:nth-of-type()里面可以写n的表达式,可以选择表达式计算出来的第几个该类型的子项3
:nth-last-of-type()里面可以写n的表达式,可以选择表达式计算出来的从后数的第几个该类型的子项3
:last-child最后一个子项3
:first-of-type前面必须接标签类型,第一个该类型的子项3
:last-of-type前面必须接标签类型,最后一个该类型的子项3
:only-child选择的节点是父节点有且只有该节点3
:only-of-type前面必须接标签类型, 选择的节点是父节点有且只有该类型的节点3
:empty空节点3

伪元素列表

CSS3支持的伪元素如下:

属性描述CSS
:first-letter向文本的第一个字母添加特殊样式。1
:first-line向文本的首行添加特殊样式。1
:before在元素之前添加内容。2
:after在元素之后添加内容。2
::selection光标选择的内容。3

参考资料:
http://www.w3.org/TR/selectors/
http://www.w3school.com.cn/css/css_pseudo_classes.asp
http://www.w3school.com.cn/css/css_pseudo_elements.asp
http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/

转载请注明:宇托的狗窝 » CSS伪类和伪元素

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址