点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

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这些用法，大部分应该都用过，特别要注意第二个连续选取的用法。有时候用对了，会帮你省好多代码。

閱讀更多 小鄭搞碼事 的文章

關鍵字: 选择 技术 标签