<body> <div class="box">
<p>0</p>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<p>1</p>
</div>
</body>
几个比较有用的伪类选择器:
选中第一个目标元素:
.box div:first-of-type{
}#选中第一个div元素。无论div前面有多少个其他元素
选中最后一个目标元素:
.box div:last-of-type{
}
#选中最后一个div元素。无论div前面有多少个其他元素
选中前几个目标元素:只需要将n改为负值,使用最后一个目标元素的位置加上 -n 就可以实现。
例如我们要选中前两个div元素,最后一个div的位置是3,那么就是
.box div:nth-child(-n+3){
font-size: 50px;
}