在网站开发过程中 ,我们经常会碰到一些选择器的要求 比如: 第一项 或者最后一项 ,或者第几项 ,亦或者隔行 第几项之后的那些项之类的 下面我们就分别来介绍下。
常见的一些用法就是 第一项 第N项 和 最后一项,这是开发中常用的选择要求 写法如下 :
first-child first-child:选择列表中的第一个标签。
nth-child(n) nth-child(n):选择列表中的第 n 个标签。
last-child last-child:选择列表中的最后一个标签。
还有就是偶数选择:
nth-child(even) nth-child(even):选择列表的偶数行。
或者另外一种写法 nth-child(2n);
奇数选择器:
nth-child(odd)
nth-child(odd) :选择列表的奇数行。
同样另外一种写法nth-child(2n-1).nth-child(2n+1);
上面这些都是开发中比较常见的一些选择方法 ,我们还可以 更加灵活的使用nth-child()进行操作;
nth-child(-n+n)
nth-child(-n+n):选择第N个数之前的项(此处第二个N表示的是具体的数字)。
nth-child(-n+n)
nth-child(-n+n):选择第N个数之后的项(此处第二个N表示的是具体的数字)。
nth-last-child(n) nth-last-child(n):选择倒数第 n 个元素(此处N表示的是具体的数字)。
nth-last-child(n+n) nth-last-child(n+n):选择倒数第 n 个之前的元素(此处第二个N表示的是具体的数字)。
nth-last-child(nn) nth-last-child(3n): 这里选择的是第3.6.9....项 表示选择3的倍数的项。
说了这么多 相信大家已经对nth:child选择器有了更详细的了解 希望大家能够熟练应用 提高开发速度。(济南文汇软件 前端开发工程师为您整理)