nth-child选择器的使用

一般遇到像ul下面有很对里，如果要是单独获取的话，要给每个小li加一个class名，很麻烦

一般这种情况用到高级选择器nth-child可以来实现

nth-child的使用方法

1、nth-child(number)

一般用法，可以直接在括号里写数字，可以获取ul下的某个具体的li,number写几就是获取第几个标签，可以给他设置css样式了。

2、括号里面可以有几个属性值 

                                        odd----获取所有的奇数标签

                                         even---获取所有标签的偶数标签

                                        n-------获取所有的标签（遍历）

                                        如果设置有规律的标签添加数字可以运用n进行运算来找到想要的标签进行设置样式   列入：

                        

.wrap>li:nth-child(5n+5){
				font-size: 50px;
				color: #fff;
				font-weight: bold;

				text-align: center;
			line-height: 200px;
			margin-right: 0;
			}

效果图如下：

        

 这样就可以给有规律的标签添加属性了

假如在ul标签中有其他的标签呢

我们一加个div标签为例：

在ul标签中加一个标签

例如：

<ul class="wrap">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<div class="clear"></div>
		</ul>

那我们想要获取最后一个标签对其设置样式

这个我们只能给标签添加class属性了

但是我们要获取最后一个li怎么获取呢？

正常情况系我们会使用选择器

ul>li:nth-last-child
但是这样真的能获取吗

.wrap>li:last-child{
				background-color: red;
				height: 200px;
			}

我们发现样式没有生效

这是因为我们在使用该选择起的时候我们首先是在类名为wrap的标签中去找到左后一个标签，最后一个标签为div标签，我们再那这个div标签起给li标签做对比，发现拿到的这个标签不是li标签，这样设置的样式就不生效，如果没有div标签则是这个li标签，则样式就会生效！去单独去其他孩子的时候也是同样的效果。

nth-first-child    第一个孩子标签

nth-last-child   左后一个孩子标签