本文共 2055 字，大约阅读时间需要 6 分钟。
一.伪类选择器
简介：CSS 伪类用于向某些选择器添加特殊的效果。
伪类选择器不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
1.1、动态伪类选择器
- E:link（链接伪类选择器）： 定义E元素，未访问的链接状态。
- E:visited（链接伪类选择器 ）：定义E元素，已访问的链接状态。
- E:active（用户行为选择器）： 定义E元素，鼠标点击未抬起时的状态。
- E:hover （用户行为选择器）： 定义E元素，鼠标悬停在上面时的状态。
- E:focus （用户行为选择器）： 定义E元素，鼠标点击了抬起后的状态。
说明：
1）当前4个超链接伪类选择器联合使用时，应注意他们的顺序，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。。错误的顺序有时会使超链接的样式失效
a:link{ color:red;} /* 未访问的链接状态 */a:visited{ color:green;} /* 以访问的链接状态 */a:hover{ color:blue;} /*鼠标滑过链接状态*/a:active{ color:yellow;} /*鼠标按下去时状态*/ 2）为了简化代码，可以把伪类选择器中相同的声明提出来放在a选择符中；使用hover属性来设置样式。
a:hover{ color:green;}/*表示超链接的三种状态都相同，只有鼠标滑过变换颜色*/ 1.2、结构伪类选择器
- E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
- E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
- E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
- E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
- E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
- E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素
- E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素
- E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
- E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
- E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素
- E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素
- E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点
注意：
结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
1.3、目标伪类选择器
- E: target：选择匹配E的所有元素，且匹配元素被相关URL指向。
1.4、语言伪类选择器
- E: lang(language)：用来匹配使用指定语言的元素。
1.5、否定伪类选择器
1.6、元素状态伪类选择器
- E: checked：匹配所有用户界面（form表单）中处于选中状态的元素
- E: enabled：匹配所有用户界面（form表单）中处于可用状态的元素
- E: disabled：匹配所有用户界面（form表单）中处于不可用状态的元素
二.伪元素选择器
简介：CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的效果是需要通过添加一个实际的元素才能达到的。可能会改变dom结构，创建虚拟dom。
- E::after：在E元素之后添加内容，常用"content"配合使用
- E::before：在E元素之前添加内容，常用"content"配合使用
- E::first-letter：向文本的第一个字母添加特殊样式。
- E::first-line：向文本的首行添加特殊样式。
- E::selection：给被用户选中或处于高亮状态的部分的E元素添加特殊样式。
三.伪类和伪元素选择器的区别
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
转载地址：http://bzxh.baihongyu.com/