:nth-child(an+b) 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

• 0n+3 或简单的 3 匹配第三个元素。

• 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）

• 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。

• 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。

• 3n+4 匹配位置为 4、7、10、13...的元素。

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

• tr:nth-child(2n+1)

• 表示HTML表格中的奇数行。

• tr:nth-child(odd)

• 表示HTML表格中的奇数行。

• tr:nth-child(2n)

• 表示HTML表格中的偶数行。

• tr:nth-child(even)

• 表示HTML表格中的偶数行。

• span:nth-child(0n+1)

• 表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同。

• span:nth-child(1)

• 表示父元素中子元素为第一的并且名字为span的标签被选中

• span:nth-child(-n+3)

• 匹配前三个子元素中的span元素。

• 
  

:nth-last-child()从兄弟节点中从后往前匹配处于某些位置的元素

注意: 这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数.

nth-last-child伪类接受一个参数, 用来作为一个模式，从后往前匹配元素.

• tr:nth-last-child(odd) or tr:nth-last-child(2n+1)

• 表示HTML表的倒数的奇数行:1、3、5等。

• tr:nth-last-child(even) or tr:nth-last-child(2n)

• 表示HTML表的倒数的偶数行:2、4、6等。

• :nth-last-child(7)

• 表示倒数第7个元素。

• :nth-last-child(5n)

• 表示倒数的第5、10、15等元素。

• :nth-last-child(3n+4)

• 表示倒数的第4、7、10、13等元素。

• :nth-last-child(-n+3)

• 表示一组兄弟节点中的最后三个元素。

• p:nth-last-child(n) or p:nth-last-child(n+1)

• 表示一组兄弟节点中的每个<p>元素。这与一个简单的p选择器相同。(由于n从0开始，而最后一个元素从1开始，n和n+1都会选择相同的元素。)

• p:nth-last-child(1) or p:nth-last-child(0n+1)

• 表示所有处于兄弟节点中倒数第一位的元素<p>。这与:last-child选择器相同。

:first-child表示在一组兄弟元素中的第一个元素。

:only-child匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.

:first-of-type表示一组兄弟元素中其类型的第一个元素。

:last-of-type表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

:nth-last-of-type(an+b) 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。

:nth-of-type()匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
<style>
main :only-of-type {
  color: red;
}
</style>

转自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

例题，有个列表长度不固定，要求每行4列，并对最后一行添加指定样式

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
  </ul>
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>

  <style>
    ul{
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
    ul li{
      width: 25%;
      border:1px solid #aaa;
      box-sizing: border-box;
      list-style: none;
    }
    ul li:nth-child(4n+1):nth-last-child(-n+4),
    ul li:nth-child(4n+1):nth-last-child(-n+4)~li{
      background-color: red;
    }
  </style>