CSS技巧：伪类与伪元素区别，合理使用伪类与伪元素
刚开始接触伪类是使用A标签的四种伪类，分别是 :active :hover :link :visited，其中最为常用的就是a:hover，一开始以为只适用于A元素，偶然发现伪类是针对所有元素，不仅是A元素，到后面接触到CSS3的伪类 :nth-child(n)等，然后再发现伪元素，当时只知道如何使用，未搞懂这两者的区别，这次就来说说什么是伪类、伪元素、两者区别以及如何使用才更为合理。
分别从定义、语法来区分伪类和伪元素，以及列出所有伪类与伪元素的属性
1.定义
· 伪类
根据W3C，CSS伪类用于向某些选择器添加特殊的效果。伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，:target。
· 伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""（默认空）；::selection表示选择元素被选中的内容。
· 结论
伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容，当然内容可以是空的，相当于空的div。
2.语法
· 伪类
伪类统一以:（单冒号）开头。
· 伪元素
伪元素标准写法以::（双冒号）开头。有时候发现单冒号写法也能正常显示，因为CSS2是使用单冒号的，CSS3出来了为了区分伪类和伪元素所以才用双冒号表示，所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
· 结论
大多数项目都需要兼容IE8以上浏览器，所以在项目需用到时用单冒号写法更为合适，如果是移动端网站，则使用双冒号。
3.伪类/伪元素一览表
· 伪类
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 选择正在被激活的元素 | 1 |
| :hover | 选择被鼠标悬浮着元素 | 1 |
| :link | 选择未被访问的元素 | 1 |
| :visited | 选择已被访问的元素 | 1 |
| :first-child | 选择满足是其父元素的第一个子元素的元素 | 2 |
| :lang | 选择带有指定 lang 属性的元素 | 2 |
| :focus | 选择拥有键盘输入焦点的元素 | 2 |
| :enable | 选择每个已启动的元素 | 3 |
| :disable | 选择每个已禁止的元素 | 3 |
| :checked | 选择每个被选中的元素 | 3 |
| :target | 选择当前的锚点元素 | 3 |
| :first-of-type | 选择满足是其父元素的第一个某类型子元素的元素 | 3 |
| :last-of-type | 选择满足是其父元素的最后一个某类型子元素的元素 | 3 |
| :only-of-type | 选择满足是其父元素的唯一一个某类型子元素的元素 | 3 |
| :nth-of-type(n) | 选择满足是其父元素的第n个某类型子元素的元素 | 3 |
| :nth-last-of-type(n) | 选择满足是其父元素的倒数第n个某类型的元素 | 3 |
| :only-child | 选择满足是其父元素的唯一一个子元素的元素 | 3 |
| :last-child | 选择满足是其父元素的最后一个元素的元素 | 3 |
| :nth-child(n) | 选择满足是其父元素的第n个子元素的元素 | 3 |
| :nth-last-child(n) | 选择满足是其父元素的倒数第n个子元素的元素 | 3 |
| :empty | 选择满足没有子元素的元素 | 3 |
| :in-range | 选择满足值在指定范围内的元素 | 3 |
| :out-of-range | 选择值不在指定范围内的元素 | 3 |
| :invalid | 选择满足值为无效值的元素 | 3 |
| :valid | 选择满足值为有效值的元素 | 3 |
| :not(selector) | 选择不满足selector的元素 | 3 |
| :optional | 选择为可选项的表单元素，即没有“required”属性 | 3 |
| :read-only | 选择有"readonly"的表单元素 | 3 |
| :read-write | 选择没有"readonly"的表单元素 | 3 |
| :root | 选择根元素 | 3 |
· 伪元素
| 属性 | 描述 | CSS |
|---|---|---|
| ::first-letter | 选择指定元素的第一个单词 | 1 |
| ::first-line | 选择指定元素的第一行 | 1 |
| ::after | 在指定元素的内容前面插入内容 | 2 |
| ::before | 在指定元素的内容后面插入内容 | 2 |
| ::selection | 选择指定元素中被用户选中的内容 | 3 |
在实际应用时，伪类使用的会更多，其中:hover 用于做特殊效果，如A元素鼠标滑过状态、CSS3过渡动画等，:nth-child(n) 则很灵活，用于选择奇数偶数的元素时、指定第几个元素时，适用于表格、列表等。
比如实现表格隔行浅灰色背景
虽然伪元素使用场景不多，但是我觉得很实用，更多时候是用于字体图标、图片图标、清除浮动等，比如有时候无法改变HTML结构、不能添加新的元素以实现效果，亦或者减少代码量，这时候伪元素很有用了，项目输出时有的标签列表不带i元素，修改标签又会影响维护，这时候就可以用伪元素来替代i元素了，即实现了效果，也不影响其他地方。
比如在li的内容前插入伪元素替代i元素，注意：需要给伪元素定义 content 值为空和定义伪元素为block才会正常显示伪元素，模拟为div元素。
主要总结了常用的使用方法，更多的使用场景方法需要小伙伴们去发掘了！
用户登录
还没有账号？
立即注册