根據 class 和數據屬性選擇 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的最后一個元素——我們還要為每年的每個 class 類型尋找最后一個數據組。 因此，我們必須跟蹤我們找到的類別和年份。

根據您提供的 HTML ，下面的代碼將找到每年的最后year 、 link和title類，並添加帶邊框的 CSS class。

它在做什么：

1. 為造型創建CSS class
2. 創建一個數組來跟蹤每年和 class 組合（例如 2017.year、2017.link 等）——我在下面的代碼中調用了這個processedDivs
3. 獲取所有具有data-group屬性的元素的列表
4. 反向循環這些...這意味着我們在 out 循環中處理的特定類型的第一個元素實際上是您數據中的最后一個
5. 檢查我們是否將 this year 和 class 添加到我們的 processedDivs
6. 如果不是，那么這是我們第一次找到這個 class 和年份，所以添加我們的 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. 如果您可以控制標記，請更改標記。 每年用<div class="year-group">... </div>的東西分組，並為.year-group添加邊框
2. 如果您不能直接控制 HTML 標記，請使用 javascript 更改標記或添加類名。 遍歷.grid的子節點，然后將分組的年份包裝在上面的包含元素中，或者執行類似將has-bottom-border類名添加到每年最后一個div的操作。