点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
CSS3有太多特性可以关注的,其中nth-child这个选择器就是当中最值得关注的特性之一,之前,我写过一篇文章,当中用了两句话来搞了一下nth-child和nth-of-type的区别, 今天,这篇我们重点来关注一下nth-child的常规应用,看有哪些是你没有用到的。
一, 选择第几个标签
例如选择第2个标签,可以这么搞:
ul li:nth-child(2){color:red}
二,选择小于等于5标签
其中n表示从整数,注意,这个时候用的是-n,如下
效果就是下面这样:
三,选择大于5标签
其中n表示从整数,注意,这个时候用的是n,如下
效果就是下面这样的:
四,选择偶数标签
其中2n也可以是even。
效果下面这样:
五,选择奇数标签
其中2n-1也可以是odd。
效果如下:
六,自定义选取标签(隔二取一)
效果是这样的:
七,选取最后一个标签
ul li:last-child{color:red}
或者选择倒数第几个标签:
ul li:last-child(3){color:red}
最后总结一下:
关于nth-child这些用法,大部分应该都用过,特别要注意第二个连续选取的用法。有时候用对了,会帮你省好多代码。