最全的css3伪类和伪元素详解 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）