常用伪类选择器

:first-child: 表示在一组兄弟元素中的第一个元素
:last-child: 表示在一组兄弟元素中的最后一个元素
:nth-child(an+b): 找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序（n=0，1，2...）
- li:nth-child(even): 表示一组元素的偶数行且元素为li
- li:nth-child(2n): 表示一组元素的偶数行且元素为li
- li:nth-child(odd)：表示一组元素的奇数行且元素为li
- li:nth-child(2n+1)：表示一组元素的奇数行且元素为li
- li:nth-child(n)：表示一组元素的所有行且元素为li
- li:nth-child(3)：表示选中一组元素的第 3 行且元素为li
- span:nth-child(0n+1):表示子元素中第一个且为 span 的元素，与 :first-child 选择器作用相同。
- span:nth-child(-n+3)：匹配前三个子元素中的 span 元素。

<!-- 示例1： -->
<style>
  p:first-child {
    color: lime;
    background-color: black;
    padding: 5px;
  }
</style>

<div>
  <p>第一个被选中</p>
  <p>不被选中</p>
</div>

<div>
  <p>第一个被选中</p>
  <h2>不被选中</h2>
  <p>不被选中</p>
</div>


<!-- 示例2： -->
<style>
  li:first-child {
    /*选择第一个*/
    color: red;
  }
  li:last-child {
    /*选择最后一个*/
    color: blue;
  }
  li:nth-child(3) {
    /*选择其中某一个，这里选择的是第三个*/
    color: skyblue;
  }
  li:nth-child(even) {
    /*even选择的是偶数项*/
    color: deeppink;
  }
  li:nth-child(odd) {
    /*odd选择的是奇数项*/
    color: green;
  }
  li:nth-child(n) {
    /*n选择的是所有项*/
    color: red;
  }
  li:nth-child(2n) {
    /* 2n选择的是所有偶数项 2n+1所有奇数项*/
    color: red;
  }
  li:nth-last-child(n) {
    /*nth-last-child是从最后一项开始往前数的*/
  }
</style>

<!-- 兄弟元素位置从1开始 -->
<ul>
  <li>第1个</li>
  <li>第2个</li>
  <li>第3个</li>
  <li>第4个</li>
  <li>第5个</li>
</ul>



<!-- 示例3： -->
<style>
  /* 表示 second这个div下的 所有span标签奇数项*/
  .second span:nth-child(2n + 1) {
    background-color: red;
  }
</style>

<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
</div>
<div class="second">
  <span>Span1</span>
  <span>Span2</span>
  <em>em 3</em> //这行是奇数行，但不是span元素所以不被选中
  <span>Span4</span>
  <span>Span5</span>
</div>

:link: 未访问过得链接
:visited: 已访问过得链接
:hover: 鼠标移动到链接上
:active: 选定的链接,活跃链接（鼠标放上去别松开，显示的状态）
:target: URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。比如：http://127.0.0.1:8080/lunboDemo1.html#b 那么:target就会匹配到锚点b元素

<!-- 示例1 -->
<style>
        #a:link {
            color: red;
        }
        a:visited {
            color: green;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: blue;
        }
</style>
<a href="#" id="a">秒杀</a>

<!-- 示例2：点击链接跳到指定锚点位置锚点的样式 -->
<style>
    p:target {
        background-color: red;
    }
</style>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
</ol>
<p id="p1">Click on the link above to try out!</p>

常用伪元素选择器

1. ::first-line：选择元素的第一行(不管单词量的增加减少会自动调整始终选择第一行)
2. ::first-letter : 匹配元素的第一个字母（都是采用双冒号 CSS3 新增）
3. ::after：创建一个伪元素，该元素是所选元素的最后一个子元素。它通常用于将装饰性内容添加到具有该 content 属性的元素中。默认情况下是内联的
4. ::before：创建一个伪元素，该元素是所选元素的第一个子元素。它通常用于将装饰性内容添加到具有该 content 属性的元素中。默认情况下是内联的
5. ::selection：表示如点击或者选中文本时的样式

<!--示例1-->
div::before {
    content: "俺";
    color: red;
    background-color: blue;
}
div::after {
    content: "18";
}

<div>今年</div>

<!--示例2-->
<style type="text/css">
        p::first-letter {  //第一个字
            color: red;
        }
        p::first-line {     //设置第一行
            color: green;
        }
        p::selection {      //设置鼠标选中的文本背景色
            color: skyblue;
        }
    </style>

<p>新闻：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：</p>


<!--示例3-->
<style type="text/css">
      ::selection {
        color: gold;
        background-color: red;
      }

      p::selection {
        color: white;
        background-color: blue;
      }
</style>

This text has special styles when you highlight it.
 <p>Also try selecting text in this paragraph.</p>

结论

伪类和伪元素分别用单冒号:和双冒号::来表示。
伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类。
伪元素是创建的dom树以外的元素

案例

例 1:将一行字符串的首字母变成红色

现在不用伪元素应该如何实现？用 CSS slector 选择？想了一晚上也没想出来，既然没法选择也就没法添加一个类来改变首字母的颜色。

<p>I am snow</p>

复制代码添加元素试试，如下，创建一个元素 span 将首字母包裹起来，进而改变其颜色，成功了。这里，关键点在于我们创建了新的元素达到了::first-letter的作用，且不能通过添加其他类来实现这一效果，因此将::first-letter叫做伪元素而不是伪类。

<p><span style={{ color: red }}>I<span/> am snow</p>

例 2: 如下要将 I am snow 这句话变为红色 很简单用:first-child，同样添加一个类试试，显然很容易达到同样效果，我们并没有创建新的元素只是添加了一个类.red-line，因此将:first-child叫做伪类而不是伪元素，尽管它和::first-letter在语义上十分相似。

div:first-child {
 color: red;
}
或
.red-line {
   color: red;
}

<div class='red-line'>
 <p>I am snow</p>
<div>

参考1

参考2

参考3

伪类和伪元素笔记

常用伪类选择器

常用伪元素选择器

结论

案例