淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中,子选择器nth-child常被用于在选择器中选中特定顺序或位置的子元素。

/* 选中列表中的所有偶数项 */
li:nth-child(even) {
background-color: #f2f2f2;
}
/* 选中表格中的第2行和第4行 */
tr:nth-child(2),
tr:nth-child(4) {
background-color: #f2f2f2;
}

可以看到,nth-child接受一个参数,该参数代表要选中的元素序列号或位置。

此外,nth-child()函数还可以接受其他几个参数来精确定位要选中的元素,其中包括:

  • n:表示任意正整数
  • even:表示偶数
  • odd:表示奇数
  • formula:表示符合特定公式的数字序列,如2n、3n+1等
/* 选中内容区域中的第2个段落 */
.content p:nth-child(2) {
font-weight: bold;
}
/* 选中表格中所有3n+1行 */
tr:nth-child(3n+1) {
background-color: #f2f2f2;
}

需要注意的是,nth-child只在当前元素的父元素中寻找匹配项,并不跨父级元素。

总之,nth-child是CSS中一个强大又灵活的选择器,合理用它可以让你更准确地控制页面元素的样式。