当我们在做网页开发时,一个相对成熟的网站,是需要用到大量的标签的,特别是我们会遇到很多相同的标签,但其属性又不相同。
<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个,所以说这个应该不是我所想的那样想变那个就那个,中间有其他标签的话会产生影响。