css中伪类和伪元素的小结伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说一个节点后面添加一个 | 或者是下面添加一个选中横线的效果，伪元素是以::双冒号的格式存在的，常用的有::after，::before.等等

常用的有

下面这些是还在开发中，不一定适用于所有的浏览器，具体的可以查看css层叠样式表

伪元素使用的是双冒号，但是也有一些可以使用单冒号（:before, :after, :first-letter, :first-line）

用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如:active，:hover等等，还有一些是特指某个节点的伪类:nth-of-type，:nth-child等等

:focus 选择获得焦点的输入字段，并设置其样式：

input:focus
{ 
    background-color:yellow;
}

:not 设置非

元素的所有元素的背景色：

:not(p)
{ 
    background-color: #ff0000;
}

:empty

p:empty
{ 
    background-color: #ff0000;
}

contenteditable 一段可编辑的段落：

<p contenteditable="true">这是一个可编辑的段落。</p>

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。