CSS的伪类选择器:nth-child()

CSS的伪类选择器:nth-child()

CSS的伪类选择器 :nth-child() 是一个非常强大的工具，它允许你根据元素在其父元素中的位置（序数）来选择特定的子元素。这个选择器可以应用于任何元素，并且可以与类型选择器、类选择器或ID选择器结合使用。

:nth-child() 选择器接受一个参数，该参数可以是整数、关键字（even 或 odd）或公式（如 an+b）。

• 正整数：直接选择第n个子元素。不能为负数, 不能倒数
  例如
  • p:nth-child(2) 选择每个父元素中的第二个

    子元素。

  • th:nth-child(66)选择第66个
  • 不能用 nth-child(-1)选择倒数第一

• 关键字：even 选择偶数子元素，odd 选择奇数子元素。例如，tr:nth-child(even) 选择表格中的偶数行。
  • even 等效 2n
  • odd   等效 2n+1

• 公式：使用形如 an+b 的公式来选择元素。
  a是整数。b是正整数, a可正负, b只能正,
  an可以理解为步长, 正数n就是向后, 负数n就是向前, 零n如同省略n
  例如，
  • :nth-child(0n+1)等同:nth-child(1)等同:first-child 选择第一个
  • nth-child(n+5)等同:nth-child(1n+5) 选择第五个到最后一个
  • nth-child(-n+10)等同nth-child(-1n+10) 倒选第十个到第一个
  • 合起来用:nth-child(n+5):nth-child(-n+10) 选第五到第十个
  • li:nth-child(2n+1) 等同 li:nth-child(odd) 选择每个父元素中的奇数
  • 子元素（即第1个、第3个、第5个等）。
  • 3n+1 选择 1,4,7,10…
  • 4n+1 选择 1,5,9,13…
  • 4n+2 选择 2,6,10,14…
  • -4n+16 表示从16向前,步长为4, 选择 16,12,8,4

请注意，:nth-child() 选择器是基于1的索引，即第一个子元素的索引是1。css的:nth-child(1)相当于js的children[0]

下面是一些使用 :nth-child() 选择器的示例：

/* 选择每个父元素中的第三个子元素，如果它是一个
元素 */
ul li:nth-child(3) {
  color: red; /* 第三个列表项将显示为红色 */
}

/* 选择每个父元素中的偶数子元素，如果它是一个
元素 */
ul li:nth-child(even) {
  background-color: lightgray; /* 偶数列表项将有灰色背景 */
}

/* 使用公式选择子元素。这将选择第1个，第4个，第7个等... 如果它是一个
元素 */
ul li:nth-child(3n+1) {
  font-weight: bold; /* 符合公式的列表项将加粗显示 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

你也可以将 :nth-child() 选择器与其他选择器结合使用，以选择具有特定属性或属于特定类的元素的子元素。例如：

/* 选择类为.items的列表中的第三个
子元素 */
ul.items li:nth-child(3) {
  color: green; /* .items类中的第三个列表项将显示为绿色 */
}
1
2
3
4

在这个例子中，ul.items li:nth-child(3) 选择器将选择类为 .items 的

元素中的第三个
• 子元素，并将其文本颜色设置为绿色。

  
  
  

  
  
  

  
  
  

  CSS的伪类选择器:nth-child()的用法示例

  n可以+- , 右边数字只能+

  第一到第六的td : td:nth-child(n+1):nth-child(-n+6)

  td:nth-child(n+1):nth-child(-n+6)
  1

  第二到第八的a : a:nth-child(n+2):nth-child(-n+8)

  a:nth-child(n+2):nth-child(-n+8)
  1

  
  
  

  1等效0n+1 , 7等效0n+7 , 没有负数,不能倒数

  第一个a : (1) 或 (0n+1)

  a:nth-child(1)
  1

  a:nth-child(0n+1)
  1

  第七个a : (7) 或 (0n+7)

  a:nth-child(7)
  1

  a:nth-child(0n+7)
  1

  想"-1",“0n-1”,“-7”,"0n-7"从倒数开始是行不通的

  
  
  

  第三个及之后的a : (n+3)

  a:nth-child(n+3)
  1

  前七个a, 第七个及之前的a : (-n+7)

  a:nth-child(-n+7)
  1

  第三到第七之间的a : a:nth-child(n+3):nth-child(-n+7)

  a:nth-child(n+3):nth-child(-n+7)
  1

  
  
  

  奇数行 : tr:nth-child(2n+1) 或 tr:nth-child(odd)

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

  tr:nth-child(odd)
  1

  偶数行 : tr:nth-child(2n) 或 tr:nth-child(even)

  tr:nth-child(2n)
  1

  tr:nth-child(even)
  1

  
  
  

  第2,12,22,32,42,52… 以10个递增 : 10n+2

  :nth-child(10n+2)
  1

  第52个及之前: 2,12,22,32,42,52… 以10个递减 : -10n+52

  :nth-child(-10n+52)
  1

  
  
  

  
  
  

  
  
  

  
  
  

  MDN Web 开发技术 :nth-child()

  选择器示例
  tr:nth-child(odd) or tr:nth-child(2n+1)
  表示 HTML 表格中的奇数行：1、3、5……。

  tr:nth-child(even) or 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]，等等。

  :nth-child(3n+4)
  表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……个元素。

  :nth-child(-n+3)
  表示前三个元素。[=-0+3、-1+3、-2+3]

  p:nth-child(n)
  表示兄弟元素列表中的每个

  元素。这与简单的 p 选择器选择的元素相同（尽管具有更高的优先级）。

  p:nth-child(1) 或 p:nth-child(0n+1)
  表示每一个兄弟元素列表中的第一个

  元素。这与 :first-child 选择器相同（并且具有相同的优先级）。

  p:nth-child(n+8)``:nth-child(-n+15)
  表示兄弟元素列表中的第 8 到第 15 个，且为

  元素的元素。