/* 选中所有类型的子元素中的第3个 */ :nth-child(3) { /* 样式 */ } /* 选中与指定类型匹配的第5个元素 */ :nth-of-type(5) { /* 样式 */ } /* 选中父元素的第1个子元素 */ :first-child { /* 样式 */ } /* 选中父元素的最后1个子元素 */ :last-child { /* 样式 */ }
需要注意的是,nth-child(n)
和nth-of-type(n)
中的n是从1开始的,而不是从0开始。
另外,如果要选中一组元素,可以使用:nth-child(n)、:nth-of-type(n)
等伪类选择器的多个参数形式,例如:
/* 选中前3个元素 */ :nth-child(-n+3) { /* 样式 */ } /* 选中偶数元素 */ :nth-child(even) { /* 样式 */ } /* 选中位置在3和5之间的元素 */ :nth-child(n+3):nth-child(-n+5) { /* 样式 */ }
以上就是CSS中取一位数字的方法。通过它们大家可以更加灵活地控制页面元素的样式。