伪类和伪元素

伪元素与伪类的区别

伪元素：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

伪类：为处于某个用户操作状态or结构的已有元素添加对应的样式。

伪元素

很少，只有这几个，其中前两个很常用：

选择器	意义
x::after	在x的子元素的第一个位置插入一个元素（内容用content表示）
x::before	在x的子元素的最后一个位置插入一个元素
x::first-letter	x一般为文本标签，选中其子元素的第一个首字母
x::first-line	x一般为文本标签，选中其子元素的第一行
x::selection	x中被用户用鼠标选中的文本

伪类

结构型伪类

:first-child / :last-child 选择某个元素的第一个(/最后一个)兄弟元素；
:nth-child(n) / :nth-last-child(n) 选择某个元素的第n个(/倒数第n个)兄弟元素;也可以为odd/even
:first-of-type/ :last-of-type 表示一组兄弟元素中其类型的第一个(/最后一个)(/第n个)元素；
:nth-of-type(n) /:nth-last-of-type(n) 表示一组兄弟元素中第n个(/倒数第n个)元素； n可为数字，关键字或者是公式
:only-child/:only-of-type 选出独生子(/独类型)元素，即匹配没有任何兄弟元素(/任何其他类型元素)的元素。
:root 文档树的根元素，一般情况下是表示 < html> 元素，在声明全局 CSS 变量时 :root 会很有用
:empty 选出没有子元素的部分元素。

---------------------以下不太常见，见于表单：---------------------
:checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
:disabled 匹配禁用的表单元素。
:enabled 匹配没有设置disabled属性的表单元素。
:valid/:invalid 匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 < input> 元素。
:optional选择不带 “required” 属性的 < input> 元素。
:focus选择获得焦点的 < input> 元素。

状态型伪类

:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。

x:not(y) 用来排除x元素满足y的元素，y可以是选择器
:lang() 通过指定的lang值选择一个元素

常见疑问

before after到底是几个冒号？

这是历史遗留问题：就定义来说一定是伪元素，CSS3 规范要求伪元素使用两个冒号， 伪类使用一个冒号 。
然而对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。