击右上方红色按钮关注“web秀”，让你真正秀起来

前言

熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。

伪类与伪元素

先说一说为什么css要引入伪元素和伪类，以下是w3c的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类与伪元素的区别

这里通过两个例子来说明两者的区别。

下面是一个简单的html列表片段：

<ul>
 <li>我是第一个</li>
 <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：

如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。

下面是另一个简单的html段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：

如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

伪元素是使用单冒号还是双冒号

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。

实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。

伪类与伪元素的具体用法

这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：

某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

想了解更多CSS选择器，请点击：CSS选择器如此之多，你了解多少？

公告

喜欢小编的点击关注，了解更多知识！

果您是一个网页设计和开发者的老手，我想你肯定使用过伪类和伪元素。但我还是建议你去查看一下目录表，可能其中的一两项你之前没有听说过。

伪类在W3C上的技术定义不是特别复杂，它基本上是一个服务于CSS的虚拟的声明或者元素的一个具体特性。一些常用的伪类有：link, :visited, :hover, :active, :first-child 和 :nth-child。还有很多，我们一时看不完。

伪类通常是要以冒号开头（：），然后是伪类的名称，有时也会在括号里赋值。

现在，伪元素和真元素是一样的了，我们可以把其当做HTML中的常用元素来使用。但它并不在文件树或者dom中，这就是说我们不能对他们进行分类，只能利用CSS来创建。

我会在文章的最后谈一下一些常见的伪元素：after；before；fisrt letter.

伪元素用单冒号还是双冒号？

把双冒号（：：）引入CSS3是为了使伪元素：：before,::after和类似于：hover, :active区分开来.除了IE8及以下版本，所有浏览器都支持伪元素中的双引号。

也有一些伪元素只支持双冒号，例如：：backdrop

就切版网而言，我们会使用单冒号标记，因为这样可以向后兼容传统浏览器；当然，如果要求使用双冒号标记，我也会在伪类中使用双冒号的。

你可以自由选择哪一种标记，没有绝对的对与错。

然而，在写这篇文章的时候，说明书要使用单冒号标记，原因就是我上面提到过的向后兼容性。

注意，新的CSS写伪元素的方法是使用双冒号的，例如：a::after{...},这样可以使他们和伪类区分开来，有时你可以在CSS中看到。但是CSS3依然允许使用单冒号的伪元素，就为了是伪类向后兼容，现在我们已然建议你坚持这种句法。

在这篇文章的标题中，支持两种冒号的伪元素会用两种方式标记出来，只支持双冒号的伪元素就以双冒号的形式呈现。

什么时候使用（不使用）生成内容呢？

生成内容是通过连接CSS特性中的content和伪元素中的：before或：after来实现的。

这个content可能是纯文本或者是一个容器，这些使我们可以通过CSS来呈现出的一个生动的模块或者装饰性的元素。这里，我指的是第一种形式----文本。

如果为了装饰而使用过多的生成内容，那些支持CSS生成内容的屏幕读者会大声读出来，这样会导致UX的效果更加糟糕。

使用CSS生成内容是为了装饰或者一些不太重要的信息，但是屏幕读者要正确使用，这样可以保证拥有辅助技术的人不会混乱。在决定是否使用CSS合成内容时要思考一下“渐进增强”（Progressive Enhancement）。

实验性伪类和伪元素

一个伪类或伪元素是实验性的是指它的规格不是固定的，它的句法和行为是可以改变的。

然而我们现在可以通过应用浏览器引擎前缀来是用伪类和伪元素。要做到这一点，我们可以参考http://caniuse.com/或者一些自动前缀的工具，例如自由前缀或者自动前缀。

在这篇文章中你会看到紧邻伪类和伪元素名称的实验性标签。

伪类

当用户执行一个动作时，状态伪类会起作用。在连接还未被浏览时，CSS中的"action"也可以写成“no action”。

让我们来看一下。

:LINK

伪类link:是链接的正常状态，通常是用来识别未被访问过的链接。在分类中的其伪类没有被识别前要生命：link,这四个的顺序是这样的:link, :visited, :hover,: active.Visited

:Visited 这个伪类用于已经被访问过的链接。按顺序吧：visited这个软件放在第二位（放在：link之后）

:HOVER

当用户的指针指到时，hover用于定义元素的样式。不必把链接加到hover上，尽管这是一种常用的方法。

hover应该位于第三位（放在伪类：visited之后）

:ACTIVE

：active这个伪类是用于定义一个被“激活”的元素或者一个指定的设备，或者一个触屏设备的按键，它可以被键盘激活，就像：foucus一样。

它的运行和:foucus 类似，不同之处在于：：active是点击鼠标和松开鼠标时起作用。

它应该排在第四位，位于：hover之后

:FOCUS

伪类：focus是用来定义一个元素的样式的，它已经从指定设备，触屏设备的界面或者键盘中获得focus，是用来很多形式元素。

BONUS CONTENT: A SASS MIXIN FOR LINKS

如果你处理过CSS中的预处理程序，比如像Sass，那么bonus content可能会引发你的兴趣。

如果你对CSS预处理程序没有兴趣---没关系---你可以直接跳转到结构性的伪类部分。

秉着使工作流程最优化的精神，下面是一个Sass mixin,我们可以创建一组基础的链接。

在mixin背后的想法是在讨论中没有声明缺省。所以，我们是被动的，去声明链接的4个阶段。

:focus 和：active通常都是一块声明的，如果你想要分开，也可以分开。注意一点：mixin是可以应用于任何HTML元素中的，而不只是links。

结构性伪类：

结构性伪类以文件树或者dom 树种的传统信息为目标，它不可以用其他类型的选择器或者配合器所代替。

::FIRST-LETTER

First-letter是选择一行文本中的第一个字母，如果一个元素包含在这一行的前面，例如图片、视频或者表格，那么首字母不会受影响并且可以被选择出来。

它的这个特性可以用于段落当中，例如，无需借助图片或外部性能就增强排版的美观度。

::FIRST-LINE

Firs-line 是用于定位元素中的第一行，它只在块级元素中起作用。

当用于段落的时候，只有第一行会有样式，即使文本会转行。

::SELECTION

：selection 是用于定义文本中被强调出来的那部分的样式的。

::PLACEHOLDER

：placeholder 是利用HTML中的placeholder 特性来定位用于造型元素中的占位符文本。

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

它也可以写成 ::input-placeholder，这实际上是CSS中的句法。

总结

CSS中的伪类和伪元素是不是很有用？他们的确给人们带来了满足感，但是这也是一个网络设计者和开发者的生活。

请确保彻底测试彻底，但是真正应用伪类和伪元素还有很长的路要走。希望你能从这篇文章中有所收获！同时不要忘记给它创建书签哦。

----

文/切版网（www.qieban.cn）

么是伪类？

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。

伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first何为伪类?就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。

伪类有什么作用？

CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。

◆link用在为访问的连接上。

◆visited用在已经访问过的连接上。

◆hover用于鼠标光标置于其上的连接。

◆active用于获得焦点(比如，被点击)的连接上。

例如：

ExampleSourceCode

a:link{color:red}a:visited{color:green}a:hover{color:blue}a:active{color:orange}

更多的理解？

JavaScript的原型中存在诸多矛盾。某些看起来有点像基于类的语言的复杂语法问题遮蔽了它的原型机制。它不让对象直接从其他对象继承，反而插入了一个多余的间接层，从而使构造函数产生对象。

当一个函数对相被创建时，Function构造器产生的函数对象会运行类似遮掩的一些代码：

this.prototype=｛constructor：this｝；

新函数对象被赋予一个prototype苏花型，其值是包含 一个constructor属性且属性值为新函数对象。该Prototype对象是存放继承特征的地方。因为JavaScript语言没有提供一种方法去确定哪个函数是打算用来作结构的，所以每个函数都会得到一个Prototype对象。

constructor属性没什么用。重要的是Prototype对象。当采用构造器调用模式，即使用new前缀去调用一个函数时，这将修改函数执行的方式。如果new 运算符是一个方法而不是一个运算符，它可能会像这样执行：

我们也可以定义一个构造器扩充它的原型：

现在我们可以构造一个实例：

我们可以构造另外一个伪类来继承Mammal，这是通过定义它的constructor函数并替换它的prototype为一个Mammal的实例来实现的：

伪类模式本意是想面向对象靠拢，但它看起来格格不入。我们可以隐藏一些不好的细节，这是通过使用method方法定义一个inherits方法来实现的：

我们的inherits和method方法都返回this，这将允许我们可以以级联的样式编程。可以只用一行语句构造我们的Cat：

本人自创的一个小群：621071874，如有交流讨论都可以进来畅谈JS

本人创建的一个交流学习群：621071874，欢迎大牛，小白进群讨论学习。

“伪类”形式可以给不熟悉JavaScript的程序员提供便利，但是也隐藏了该语言的真实本质，借鉴类的表示法可能误导程序员去编写国语深入与复杂的层次结构。许多复杂的类层次结构产生的原因就是静态类型检查的约束。JavaScript完全拜托了那些约束。在基于类的语言中，类的继承是代码重要的唯一方式。JavaScript悠着更多更好的选择。

最后，不知道各位程序员对伪类有什么看法，请多多指教。