当我们在做网页开发时，一个相对成熟的网站，是需要用到大量的标签的，特别是我们会遇到很多相同的标签，但其属性又不相同。
<style>
div{
background-color: skyblue;
}
</style><body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>运行效果：
所以我们一般在CSS中，就不会用到标签选择器,因为当你用到这个的话，所有的标签都会变，就显得比较笨重，不够灵活。
所以我们就会想到用类选择器等等，可是那样的话会写很多类，较为复杂。
所以说我们引入了结构为类，就是方便我们在相同的标签中选择到自己想用的标签，这样就较为方便灵活。
话不多说，我们来见识一下它的威力吧！
我们只想让第一个div变时：
<style>
div:first-child{
background-color: skyblue;
}
</style>运行效果：
当我们只想让最后一个div变时：
<style>
div:last-child{
background-color: skyblue;
}
</style>运行效果：
是不是非常的神奇？我还可以想选第几个就选第几个，不想你看
<style>
/*我想选第6个变*/
div:nth-child(6){
background-color: skyblue;
}
</style>运行效果：
哈哈，从此我的人生我做主，我想选啥就是啥，嘿嘿嘿！
当然还有一种倒着数的方法，小伙伴们可以自己试试看哦。
<style>
div:nth-last-child(2){
background-color: skyblue;
}
</style>总结一下就是：在css中多个相同的标签，我们可以用：
标签:first-child
标签:last-child
标签:nth-child(n)
标签:nth-last-child(n)
来找到自己想用的标签，但是我也发现一个问题就是，几个相同的标签必须是连续写的，如果中间我插一个标签，那么会打乱顺序，我也不知道为什么？有知道的大佬也可以告诉我谢谢。
<style>
div:nth-child(8){
background-color: skyblue;
}
</style><body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<p>4</p>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body> 运行结果：
明明我选择的是div的第8个，结果却改变了第7个，所以说这个应该不是我所想的那样想变那个就那个，中间有其他标签的话会产生影响。
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
