什么是伪类选择器和伪元素选择器CSS的选择器有很多，比如元素选择器，id选择器，class选择器，交集选择器。这篇文章介

CSS的选择器有很多，比如元素选择器，id选择器，class选择器，交集选择器。这篇文章介绍两种比较特殊的选择器：伪类选择器和伪元素选择器。

名称	特点	举例
伪类选择器	伪类用来描述一个元素的特殊状态比如：第一个元素、被点击的元素、鼠标移入的元素。伪类一般使用 : 开头	:first-child 表示第一个子元素
伪元素选择器	伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）。伪元素使用 :: 开头	::before 元素的开始位置

具体介绍及代码举例

伪类选择器

根据所有的子元素进行排序
1. :first-child 表示第一个子元素
2. :last-child 最后一个子元素
3. :nth-child(n) 选择第n个子元素(n的特殊值：n 表示选中所有，n的范围0到正无穷; 2n或even 选中偶数位的元素; 2n+1或odd选中奇数位的元素)
根据同类型的子元素进行排序
1. :first-of-type 同类型的第一个
2. :last-of-type 同类型的最后一个
3. :nth-of-type(n) 同类型的第n个
4. :not() 否定伪类（作用：将符合条件的元素从选择器中剔除）
a元素的伪类
1. :link 用来表示没访问过的链接
2. :visited 用来表示访问过的链接（visited这个伪类只能修改链接的颜色）
3. :hover 用来表示鼠标移入的状态
4. :active 用来表示鼠标点击时的状态
5. 注意：hover和active不是超链接独有的

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪类选择器</title>
    <style>
          /* 
            将ul里的第一个li设置为红色
         */
          ul > li:first-of-type{
            color: red;
          }
          /*
            将ul里的第二个li设置为绿色
          */
         ul > li:nth-of-type(2){
            color: green;
         }
         /*
            将ul里的除了第三个li，其他li都设置为绿色
          */
         ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
         }
    </style>
</head>
<body>
    <ul>
        <span>span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

伪元素选择器

常用伪元素
1. ::first-letter 表示第一个字母
2. ::first-line 表示第一行
3. ::selection 表示选中的内容
4. ::before 元素的开始位置
5. ::after 元素的最后
注意：before和after必须结合content属性来使用。content表示内容，是通过css添加的，不可选中

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        <!-- 让L实现首字母下沉效果 -->
         p::first-letter{
            font-size: 50px;
         }
         div::before{
            content: 'abc';
            color: red;
         }
    </style>
</head>
<body>
    <div>hello</div>
    <p>Lorem ipsum dolor sit amet consectetur</p>
</body>
</html>