使用css属性:nth-child(n)匹配选择第n个子元素

使用CSS的:nth-child(n)可以用来选中元素的第n个子元素。这一属性可以给网页设计师带来很多有用的选择元素的方法。下面是完整攻略：

基本语法

使用:nth-child(n)语法如下:

selector:nth-child(n) {
  /* 样式规则 */
}

其中，selector是要选中的元素的选择器，n是要选中的子元素的索引数字。例如：

ul li:nth-child(2) {
  /*样式规则*/
}

这个例子表示选择其父元素为 ul 元素的第二个 li 子元素。

实际示例

示例一

以下的例子将选中每个父元素的奇数子元素并将它们的文本颜色改为红色：

.parent div:nth-child(odd) {
  color: red;
}

示二

以下的例子会将第三个父元素的第二个子元素的边框颜色设置为蓝色：

.parent:nth-child(3) > div:nth-child(2) {
  border-color: blue;
}

在上面的示例中，parent:nth-child(3) 选中了父元素为 3 的 div 元素，而 > div:nth-child(2)指定了它的第二个子元素。

同时，:nth-child(n) 还允许我们选择一定范围内的元素，例如 :nth-child(2n+9) 表示选中从第 9 个开始的每个偶数索引的子元素。

总之，通过正确使用 :nth-child(n) 属性，我们可以轻松地选择各种各样的 DOM 元素。