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中一个强大又灵活的选择器,合理用它可以让你更准确地控制页面元素的样式。