css选择多行元素的最后一行
我们经常有这样的需求，如下：
我们需要选中第二行元素，设置不同的背景。
上面的代码我贴上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section{
max-width: 1200px;
display: flex;
margin: 0 auto;
flex-wrap: wrap;
}
.item{
width: 20%;
height: 80px;
box-sizing: border-box;
border: 1px solid black;
background-color: #00c6fb;
}
</style>
</head>
<body>
<section>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html>
总共有10个.item元素，每行显示5个，如果我们要选择最后一行我们可以用下面的css
.item:nth-child(5n+1):nth-last-child(-n+5),.item:nth-child(5n+1):nth-last-child(-n+5) ~ .item{
background-color: gray;
}
这个css选择器的意思是，从第一个开始，每5个选中，这样就会把每行第一个选中，然后我们再取最后一个，就能拿到最后一行第一个元素，只要在最后一行第一个元素后面的元素也选中，那么最后一行就选中了。
上面的还可以扩展为其他列数的情况，比如每行展示3列，我们把.item的宽度改为33.33%。这样就是每行3个元素，然后我们修改css样式
.item:nth-child(3n+1):nth-last-child(-n+3),.item:nth-child(3n+1):nth-last-child(-n+3) ~ .item{
background-color: gray;
}
由此可得，我们只需要修改数字部分即可。
css选择多行元素的最后一行
https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/css-selector-last-line