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

Posted 2021-01-25 both-eyes

伪类

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用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开始支持双冒号伪元素写法。）