Javascript 基于类和数据属性选择CSS网格最后一行中的项

如何在CSS网格中按年对

div

项进行分组，而不在CSS中指定年份？年份作为

数据组

属性包含在每个div中。我想为

.year

、

.link

和

.title

选择任何年份的最后一个

div

并用边框对它们进行分组

我需要做下面这样的事情，但根本不起作用。我需要在不知道是哪一年的情况下按年份对项目进行分组

.year[data group=“unknown”]：类型的最后一个{
边框底部：1px纯色灰色；
}

2018
复仇者：作为娜塔莎·罗曼诺夫/黑寡妇的无限战争
2017
作为米拉·基里安少校/草崎本子的《贝壳中的幽灵》
2017
雷神：拉格纳洛克扮演娜塔莎·罗曼诺夫/黑寡妇（档案录像/未经认证）

这实际上不是CSS网格问题。问题是没有CSS选择器可用于按属性值对元素进行分组

另外，

：type的last

将只查找给定元素类型的最后一个元素，而不是具有特定属性或属性值的最后一个元素。不管您是否知道

数据组的可能值，
：类型的最后一个将不会有帮助

您的最佳选择如下：

如果您可以控制标记，请更改标记。每年用类似于
的东西分组，并将边框添加到
.year group

如果您无法直接控制HTML标记，请使用javascript更改标记或添加类名。遍历
.grid
的子节点，或者如上所述将分组的年份包装在包含元素中，或者执行类似于为每个年份的最后一个
div添加
has bottom border
类名的操作

这不能仅使用CSS来完成，但是当您标记javascript时，我假设您对使用js的解决方案感到满意

这样做的困难在于，我们不仅仅是在寻找该年
数据组的最后一个元素，而是在寻找每种班级类型的最后一个数据组。因此，我们必须跟踪我们发现的班级和年份

根据您提供的HTML，下面的代码将查找上一个
年度
、
链接
和
标题
类，并添加带有边框的CSS类

它在做什么：

为样式创建CSS类
创建一个数组以跟踪每年和班级组合（例如2017年、2017年、链接等）-我在下面的代码中称之为
processedDivs
获取具有
数据组属性的所有元素的列表

以相反的顺序循环这些。。。这意味着我们在out循环中处理的特定类型的第一个元素实际上是数据中的最后一个元素
检查我们是否已将今年和类别添加到我们的ProcessedDiv中
如果没有，那么这是我们第一次发现这个类和年份，所以添加我们的CSS样式
工作示例：


/*2。数组来保存我们已处理的年份和类的记录*/
让processedDivs=新数组；
/* 3. 连年*/
让allYears=document.querySelectorAll（“[data group]”）；
/* 4. 反向遍历div，以便将样式添加到列表中的第一个*/
对于（i=allYears.length-1；i>=0；i--）{
//获取年份和类名
year=allYears[i].getAttribute（'data-group'）；
className=allYears[i].className；
//5.如果我们今年没有在这个类中添加CSS。。。
if（processedDivs.indexOf（年份+类名）=-1）{
processedDivs.push（年份+类名）；//添加到列表
allYears[i].classList.add（“年分隔符”）//添加CSS类
}
}
/*1。我们班每年申请最后一排*/
.年份分隔符{
边框底部：1px纯色灰色；
}
.grid{
显示：网格；
网格模板列：50px 50px 1fr；
}
.grid分区{
}

2018
复仇者：作为娜塔莎·罗曼诺夫/黑寡妇的无限战争
2017
作为米拉·基里安少校/草崎本子的《贝壳中的幽灵》
2017
雷神：拉格纳洛克扮演娜塔莎·罗曼诺夫/黑寡妇（档案录像/未经认证）
你想在
div.year
下有
下边框
，该边框未知或与该年份相关。据我所知，不清楚你到底想实现什么。也许你可以把你的网格分割成flex布局部分，并对它们进行样式化处理？@ONYX为你做了这项工作，或者你需要更多的帮助吗？