CSS 伪类选择器 :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()

:nth-child()

根据父元素内的所有兄弟元素的位置来选择子元素。

子元素的计数包括任何元素类型的兄弟子元素。

但是只有当该子元素位置上的元素与选择器的其他组件匹配时，才被视为匹配。

语法

以一个参数来描述匹配兄弟元素列表中元素索引的模式。元素索引从1开始。

:nth-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

特殊值

• odd：表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
• even：表示元素在兄弟元素列表中的位置是偶数：2、4、6……。

函数符号

<An+B>

表示元素在兄弟元素列表中的位置是An+B模式的元素，其中n为正整数或0，A和B为整数，且A不为0。其中：

• A是整数步长，
• B是整数偏移量，
• n是从0开始的所有非负整数。

它可以被理解为列表中的第An+B个元素。A和B必须都是<integer>值。

选择器示例

• tr:nth-child(odd)或tr:nth-child(2n+1)：表示HTML表格中的奇数行：1、3、5……。
• tr:nth-child(even)或tr:nth-child(2n)：表示HTML表格中的偶数行：2、4、6……。
• :nth-child(7)：表示第7个元素。
• :nth-child(5n)：表示第5、10、15……个元素。第一个匹配的元素是0 [=5x0]，但由于元素的索引是从1开始的而n从0开始，所以不会匹配任何元素。这乍一看可能有点奇怪，但是当公式中的 B 部分为 >0 的值时，就会变得更有意义。
• :nth-child(n+7)：表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。
• p:nth-child(n)：表示兄弟元素列表中的每个<p>元素。这与简单的p选择器选择的元素相同（尽管具有更高的优先级）。
• p:nth-child(1)或p:nth-child(0n+1)：表示每一个兄弟元素列表中的第一个<p>元素。这与:first-child选择器相同（并且具有相同的优先级）。
• p:nth-child(n+8):nth-child(-n+15)：表示兄弟元素列表中的第8到第15个，且为<p>元素的元素。

of 示例

of <selector>是可选的。

带有 class="noted" 的偶数个列表项具备样式。

li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

示例

计数时会将ol也统计在内，但在应用样式时，只会作用于li。

-n+3表示前3个元素（注意：计数不区分选择器），但又要是li选择器，所以只有<li>1</li>和<li>2</li>有样式。

-n+3：3 [-0+3]、2 [-1+3]、1 [-2+3]，n=3时已经没有意义了。

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: red;
}

<ul>
  <ol>aaa</ol>
  <li>1</li>
  <li>2</li>
  <ol>bbb</ol>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

:nth-last-child()

从兄弟节点中从后往前匹配（倒数）处于某些位置的元素。

语法

/* 在所有兄弟节点中，从后往前
   选择所有 4 的倍数的节点 */
:nth-last-child(4n) {
  color: lime;
}

示例

• tr:nth-last-child(odd)或tr:nth-last-child(2n+1)：表示HTML表的倒数的奇数行:1、3、5等。
• tr:nth-last-child(even)或tr:nth-last-child(2n)：表示HTML表的倒数的偶数行:2、4、6等。
• :nth-last-child(7)：表示倒数第7个元素。
• :nth-last-child(3n+4)：表示倒数的第4、7、10、13等元素。
• :nth-last-child(-n+3)：表示一组兄弟节点中的最后三个元素。
• p:nth-last-child(n)或p:nth-last-child(n+1)：表示一组兄弟节点中的每个<p>元素。这与一个简单的p选择器相同。(由于n从0开始，而最后一个元素从1开始，n和n+1都会选择相同的元素。)
• p:nth-last-child(1)或p:nth-last-child(0n+1)：表示所有处于兄弟节点中倒数第一位的元素<p>。这与:last-child选择器相同。

:nth-of-type()

基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。

语法

:nth-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

示例

<dd>2. Cucumbers</dd>、<dd>4. Apples</dd>和<dd>6. Pears</dd>将获得样式。

dd元素的偶数个元素。

注意：:nth-of-type计数时只统计符合选择器条件的元素，所以这里<dt>Vegetables:</dt>和<dt>Fruits:</dt>不符合计数条件，不参与计数。

dd:nth-of-type(even) {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

:nth-last-of-type()

基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。

语法

:nth-last-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

示例

<dd>5. Mangos</dd>和<dd>2. Cucumbers</dd>将获得样式。

dd元素的倒数第3、6...等元素。

注意：:nth-last-of-type计数时只统计符合选择器条件的元素，所以这里<dt>Vegetables:</dt>和<dt>Fruits:</dt>不符合计数条件，不参与计数。

dd:nth-last-of-type(3n) {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

参考文档

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type