伪类和伪元素的区别

在css2中是这样定义两者的：

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类存在的意义是为了经过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。

第一点讲的是获取不存在与DOM树中的信息。好比<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能经过CSS选择器来获取；

第二点讲的是获取不能被常规CSS选择器获取的信息。好比伪类:target，它的做用是匹配文档(页面)的URI中某个标志符的目标元素。

target:URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被连接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

<ul>
    <li>123</li>
    <li></li>
</ul>

li:first-child相似于

<ul>
    <li class="first-child">123</li>
    <li></li>
</ul>

li.first-child 同样
这个时候，被修饰的<li>元素依然处于文档树中。

<ul>
    123
</ul>

ul:first-letter相似于

<ul>
    <span class="first-letter">1</li>
    23
</ul>

ul:first-letter被修饰的时候，<span>元素并不处于文档树中。

所以，伪类与伪元素的区别在于：有没有建立一个文档树以外的元素。

:first-child CSS伪类

表明了一组兄弟元素中的第一个元素。在level3实现中，被匹配的元素须要具备一个父级元素，而在level4实现中则不须要

:first-child 匹配的是某父元素的第一个子元素，能够说是结构上的第一个子元素。

p:first-child，常见的错误理解是这个选择器是选择p的第一个元素。

伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，好比 p:first-of-type，就是指全部p元素中的第一个。这里再也不限制是第一个子元素了，只要是该类型元素的第一个就好了，固然这些元素的范围都是属于同一级的，也就是同辈的。

一样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也能够这样去理解。

伪元素

伪元素包括:first-letter, :first-line, :before ,:after等

全部的伪元素都要写在伪元素选择器的最后面，若是这样写就会出错，

p:first-letter em{
    
}

这是不容许的。