伪元素/伪类

什么是伪元素？

伪元素在DOM中创建了一些抽象元素，而且这些元素本身时不存在与DOM中的。在CSS3中伪元素前要使用::（两个冒号）。

比如

使用在使用::before  和 ::after时，要使用content进行内容设置。默认情况下，伪元素插入的内容为行内元素，不过可以使用display进行设置。

注意：同时只能使用一个伪元素

什么是伪类？

伪类是用来获取DOM中不存在的信息（比如<a>的link,hover,visited等状态），或者获取常规CSS选择器不能获取的信息（比如伪类:target）。

部分伪类如下：

使用伪类可以和很方便地根据已有的DOM元素对目标元素进行选择。可以使选择更加灵活，同时减少了类和id的使用。

比较典型的例子是通过使用伪类nth-child(n)选择属于父元素的第n个子元素。

p:nth-child(3){color:black;}p:nth-child(2n){color:red);}

上面的代码将DOM中所有p元素中第三个子元素字体颜色设置为黑色。然后又将所有p元素的偶数个子元素字体颜色设置为红色。

注意：可以同时使用多个伪类。

小结：

伪元素相当于无中生有，创建一个空的元素，然后将内容添加进去。而伪类则是用来弥补CSS选择器的不足，它使选择更灵活，代码更简洁。