关于css伪类，伪元素详解总结

伪类

伪类就是一种虚构的状态或者说是一个具备特殊属性的元素可使用CSS进行样式修饰。常见的几种伪类是:

:link , :visited , :hover , :active , :first-child 以及 :nth-child。

这里还有不少，接下来咱们将要逐一进行介绍。此外，伪类前面老是加一个冒号(:)。以后跟着伪类的名字或者是括号里面的值，如:nth-child。

伪元素

关于伪元素，它们更像是虚拟的元素能够和HTML元素同样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着咱们并无真正的指定伪元素，可是可使用CSS进行建立。常见的几种伪元素是

::after , :before 以及 :first-letter。

在文章的最后咱们将对他们进行详细的说明。

关于伪元素使用单冒号仍是双冒号?

在大多数状况下，二者都可。

CSS3中引入双冒号(::)是为了在伪类中，如::hover,:active,区分伪元素，如::before，::after。除了IE8及其如下版本不支持外，全部的浏览器均支持伪元素中双冒号的使用。

一些伪元素，如::backdrop只接受双冒号的使用。
就我我的而言，我使用单冒号以便使个人CSS能够向后兼容一些旧浏览器。固然，在那些指定使用双冒号的伪元素上使用双冒号。
你能够自由的去选择使用，由于不存在对错之分。
然而在写这篇文章时，规范建议使用单冒号，理由如上所述，为了获得更好的向后兼容性

测试环境：xp ,ie7~8 chrome。

link 伪类 ：(：link,：visited) 这个是连接专用

动态伪类 ：(：hover,:active,:focus)

对于连接（a标记）无论是link伪类仍是动态伪类，在ie7-8,chrome 都有效果

对于表单元素，
ie7 下不支持动态伪类，
ie8下文本框，单选框都支持：focus，
chrome下文本框支持：focus，复选框不支持focus

对于p，tr ，ie7-8,chrome 都只支持：hover。

---

常见的hover、active伪类顺序问题

下面是正确的顺序：

1. a:link{}
2. a:visited{}
3. a:hover{}
4. a:active{}

---

伪类与伪元素的看起来很像，有什么区别吗？

不少人把伪类、伪元素都当作“伪类”来讲，其实是有区别的。

伪类、伪元素，都是属于CSS选择器的范围。

简单的说：

伪类，若是我放弃伪类不用而 又想要伪类一样的效果，通常我能够为元素加一个class类，也能达到伪类选择器同样的效果。（如，:first-child伪类）

伪元素，若是我放弃伪元素不用而 又想到达伪元素一样的效果，我必须建立一个元素，才能达到伪元素的效果。（如，:first-line伪元素）

---

为何有些写一个冒号，有的是两个冒号？

w3c的CSS3规范中规定：

:单冒号，用于伪类

::双冒号，用于伪元素

可是在css2规范中，伪元素的写法是:before——单冒号的形式。

伪类、伪元素的单冒号、双冒号写法问题

在CSS3规范中，伪类 与 伪元素，写法是规定的：

伪类写法：单冒号+伪类（如:last-child）

伪元素写法：双冒号+伪元素（如::first-line）

在CSS2规范中，伪类、伪元素都是使用单冒号+伪类或伪元素。

通常浏览器为了兼容CSS，两种都会支持， 可是早期的IE并无支持到CSS3的双冒号写法，为了兼容，推荐使用单冒号的写法。 （从IE9开始支持双冒号伪元素写法。）