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

Question

如何在CSS网格中按年对div项进行分组，而不在CSS中指定年份？年份作为data-group属性包含在每个div中。我想为.year，.link和.title挑选任何一年的最后一个div，并用边框对它们进行分组。

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

​

.year[data-group="unknown"]:last-of-type {
      border-bottom: 1px solid gray;
}

<div class="grid">
          <div data-group="2018" class="year">2018</div>
          <div data-group="2018" class="link"><a href="#"></a></div>
          <div data-group="2018" class="title">Avengers: Infinity War <span>as Natasha Romanoff / Black Widow</span></div>

          <div data-group="2017" class="year">2017</div>
          <div data-group="2017" class="link"><a href="#"></a></div>
          <div data-group="2017" class="title">Ghost In The Shell <span>as Major Mira Killian / Motoko Kusanagi</span></div>

          <div data-group="2017" class="year">2017</div>
          <div data-group="2017" class="link"><a href="#"></a></div>
          <div data-group="2017" class="title">Thor: Ragnarok <span>as Natasha Romanoff / Black Widow (archive footage / uncredited)</span></div>

</div>

​

Answer 1

这不能仅使用CSS来完成，但是由于您标记了javascript，所以我假设您对使用js的解决方案很满意。

这样做的困难在于，我们不仅要查找具有该年data-group的最后一个元素-我们还要查找每个类类型每年的的最后一个数据组。因此，我们必须跟踪我们找到的班级和年份。

基于您提供的超文本标记语言，下面的代码将查找每一年的最后一个year、link和title类，并添加一个带边框的CSS类。

它在做什么：

1. 为styling
2. Create创建CSS类一个数组来跟踪每一年和类的组合(例如2017年.year，2017年.link等)-我在下面的代码中调用了这个processedDivs
3. 通过这些元素反向使用data-group获取所有元素的列表...这意味着我们在out循环中处理的特定类型的第一个元素实际上是data
4. 中的最后一个元素。如果我们将今年和类添加到我们的processedDivs
5. if not中，那么这是我们第一次找到这个类和年，所以添加我们的CSS

工作示例：

​

/* 2. array to keep a record of the years and classes we have processed */
let processedDivs = new Array; 

/* 3. get all years in an array */
let allYears = document.querySelectorAll('[data-group]');

/* 4. loop through the Divs in reverse so we add the style to the first in our list*/
for (i = allYears.length-1; i >= 0; i--) {
    // Get the year and class name
    year = allYears[i].getAttribute('data-group');
    className = allYears[i].className;

    // 5. if we haven't added the CSS to this class for this year...
    if (processedDivs.indexOf(year+className) === -1) {
        processedDivs.push(year+className);           // add to the list
        allYears[i].classList.add("year-separator")  // add the CSS class
    }
}

/* 1. our class to apply to the last "row" for each year */
.year-separator {
    border-bottom: 1px solid gray;
}
.grid { 

  display: grid;
  grid-template-columns: 50px 50px 1fr;
}
.grid div {

}

<div class="grid flex-row-container">
      <div data-group="2018" class="year">2018</div>
      <div data-group="2018" class="link"><a href="#"></a></div>
      <div data-group="2018" class="title">Avengers: Infinity War <span>as Natasha Romanoff / Black Widow</span></div>

      <div data-group="2017" class="year">2017</div>
      <div data-group="2017" class="link"><a href="#"></a></div>
      <div data-group="2017" class="title">Ghost In The Shell <span>as Major Mira Killian / Motoko Kusanagi</span></div>

      <div data-group="2017" class="year">2017</div>
      <div data-group="2017" class="link"><a href="#"></a></div>
      <div data-group="2017" class="title">Thor: Ragnarok <span>as Natasha Romanoff / Black Widow (archive footage / uncredited)</span></div>

    </div>

​

Answer 2

这并不是CSS网格的问题。问题是没有可用的CSS选择器来按属性值对元素进行分组。

此外，:last-of-type将只查找给定元素类型的最后一个元素，而不是具有特定属性或属性值的最后一个元素。不管你是否知道data-group的可能值，:last-of-type都帮不上忙。

您在这里的最佳选择是：

1. Change标记，如果您可以控制它的话。每年使用<div class="year-group"> ... </div>之类的东西进行分组，并在HTML中添加边框以更改标记，或者如果您不能直接控制.year-group
2. Use标记，则添加类名。遍历.grid的子节点，然后像上面那样将分组的年份包装在一个包含元素中，或者在每一年的最后一个div中添加一个has-bottom-border类名。