咨询电话:
15628812133
15
2019/06

CSS 选择器 nth-child 的几种用法

发布时间:2019-06-15 13:50:29
发布者:小逗号
浏览量:
0

网站开发过程中 ,我们经常会碰到一些选择器的要求 比如: 第一项  或者最后一项 ,或者第几项 ,亦或者隔行  第几项之后的那些项之类的 下面我们就分别来介绍下。

常见的一些用法就是 第一项  第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选择器有了更详细的了解 希望大家能够熟练应用 提高开发速度。(济南文汇软件 前端开发工程师为您整理)

关键词:
返回列表