CSS3选择器nth-child(n)

#### CSS3 nth-child(n)选择器

/**
 * CSS3中的nth-child(n)选择器允许你选择父元素的特定子元素，基于它们的位置或它们与其他兄弟元素的关系。
 * 可以用于选择列表、表格行、盒子等元素的特定顺序或模式。
 */

/* 选择第3个LI元素 */
li:nth-child(3) {
  background: orange;
}

/* 选择每3个LI元素（即3的倍数） */
li:nth-child(3n) {
  background: orange;
}

/* 从第1个开始，选择每3个LI元素的第1个 */
li:nth-child(3n+1) {
  background: orange;
}

/* 从第5个开始，选择每3个LI元素的第1个 */
li:nth-child(3n+5) {
  background: orange;
}

/* 选择第5的倍数减去1的LI元素，例如第4个、第9个 */
li:nth-child(5n-1) {
  background: orange;
}

/* 使用jQuery，每3行的行设置背景颜色 */
$("tr:nth-child(3n)").css("background", "#eee");

/* 使用jQuery，每2行的行设置背景颜色 */
$("tr:nth-child(2n)").css("background", "#eee");

/* 如果你想要选择每隔三行的第二行和第三行，可以这样写 */
$("tr:nth-child(3n+2)").css("background", "#eee");

/* 解释：li:nth-child(3n+2)
 * 这意味着：每一行有3个元素(表示为3n)，而你想选择每一行的第二个元素(表示为+2)。
 * 所以整体表示为3n+2，即每3个元素中的第2个。
 */