CSS伪类和伪元素

伪类与伪元素选择器主要的集中在“伪”上面，本身可以不存在，但是如果存在，则一定会发生某一些改变，伪类使用的是单冒号，即 :,伪元素也可以使用单冒号 :,CSS3中尝试区分伪类和伪元素，推荐伪元素使用双冒号 ::来标识.两种都是可用的。

常见的伪类和伪元素

1. :hover，表示设置鼠标移动上去之后的效果
2. :link，表示设置a标签点击之前的效果
3. :active，表示设置a标签点击时候的效果
4. :visited，表示设置a标签点击之后的效果
5. :first-child，选取第一个子元素
6. :last-child,选取最后一个子元素
7. :nth=child(n)，表示选取第n个子元素
   1. :nth-child(even) 表示选取偶数的子元素
   2. :nth-child(odd)，表示选取奇数的子元素
   3. :nth-chlid(xn+y)，分组选择功能，表示每x分一个组，选取每个组中的第y项
   4. :nth-child(-n+x)，选择前n项的元素
   5. :nth-child(n+y)，排除前面的y-1项这个演变自:nth-chlid(xn+y)这种方式。
8. :nth-of-type(n)，这个选择器用法与:nth=child(n)差不多，唯一不同的就是它先查找元素然后再进行判断，例如，h2:nth-child(n)就是先找第n个元素然后判断第n个元素是否为h2元素，如果是则选择器成立。

nth-child(n)与nth-of-type(n)的用法：
如果子元素是同一个类型，我们可以使用nth-child(n),如果子元素不是相同的类型，我们优先使用nth-of-type(n)

9. :first-line，选取段落文字的第一行
10. :first-letter，选取第一个文字
11. :not，排除，取反
12. :checked，代表单选或者多选按钮被选中的元素
13. :focus，输入框获取焦点之后
14. ::placeholder ，设置输入框的提示信息
15. :read-only，设置只读的表单元素
16. :disabled，禁用表单元素
17. :target，表示网页中一个元素被a标签触发之后的效果
18. ::after，在当前元素的最后面去插入content里面的内容
19. ::before，在当前元素的最前面去插入content里面的内容

<style type="text/css">
/* 用before与after属性时必须要添加content属性 */
p::after{
	content: ' world';
}
p::before{
	content: '123 ';
}
</style>
<p>hello</p>