Css新增选择器nth-child

Css3中新增了很多能大大简化我们开发过程的选择器，我总结了Css新增选择器nth-child的使用方法，在这里分享给同学们。

 

1. 什么是nth-child？

 

下面我用一个例子来告诉同学们什么是nth-child。

例如，我们在页面上放了一个无序列表，这个无序列表里面有一堆的小猪佩奇。

 

然后我们可以看到，这一堆的佩奇颜色有点单调，我们想让它隔一行变一个颜色。】

如果我们用给li标签类名的方式逐个逐个的给这群佩奇设置颜色，那就会很麻烦，但是如

果用上我们的Css新的选择器nth-child,那就方便很多了。

nth-child选择器的写法如下

保存之后看看效果

可以看到佩奇们已经隔一行变了一次颜色。

这个nth-child实际上是一个结构伪类选择器，它的作用是选择到某个父元素的一个或者多个特定的子元素。

1. 怎么使用nth-child选择器？

nth-child在代码中后面要加一个括号，括号中写入选择的条件，比如我们上面的例子里，我在括号里写上了单词even，意思是偶数，所以我们的小猪佩奇们只是编号偶数的变成了粉色。

而在nth-child（n）的括号中可以填写的有三种：关键字，数字和公式。

数字：如果n数字的话，就是选择到第n个子元素，比如填的数字是3，那就是选择到该父元素的第三个子元素。

关键字：even 和 odd ，意思是偶数和奇数。也可以填frist-child和last-child;意思是第一个子元素和最后一个子元素。

公式：公式的写法比较灵活，一般就是带有字母n 的表达式。

例如：

：nth-child（-n+6），选择第一个到第六个的子元素。

：nth-child（n+6）,选择第六个开始，直到最后。

其中这个表达式可以按照自己的需求写，比较灵活。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！