动态定位CSS网格中的最后一行

Question

因此，我使用以下CSS动态处理不平衡网格的最后几行：

.agenda-event, .agenda-magazine {
  &:nth-of-type(4n+1):nth-last-of-type(-n+4),
  &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & {
    .agenda-button {
      border-bottom: 0;
    }
  }
}

来源：http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

此代码基于4格网列。但由于某种原因，当网格中只剩下4个项目时（因此只有1行）。它丢弃了第一个项目的边框底部，但是留下了其他三个边框的底部（因为它基本上是最后一行，我需要边框底部保持为0）。我究竟做错了什么？有什么我可以忽略的吗？

上图的HTML：

<div class="agenda-group-content">
  <div class="agenda-magazine"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
</div>

Answer 1

<强>原因：

可能存在编译器版本问题导致此处出现问题。在Sassmeister.com或CodePen使用最新版本的编译器编译时，问题中给出的代码给出了以下CSS。即使你只有4个元素，这个CSS也能很好地工作。

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button,
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button {
  border-bottom: 0;
}

但是当我在Fiddle中编译相同的代码时，我得到以下输出（取自Dev Console）：

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) .agenda-button, 
.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button {
  border-bottom: 0;
}

正如您所看到的，组中缺少两个选择器。它们如下：

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button, 
.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button, 

这里的第一个对于以下结构非常关键，因为.agenda-magazine项是第一个（和第四个最后一个项）以及跟随它作为.agenda-event个项目的所有项目。因此，如果没有这个，.agenda-event的兄弟元素的底部边框将不会被取消。

<div class="agenda-group-content">
  <div class="agenda-magazine"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
  <div class="agenda-event"></div>
</div>

以下选择器不会解决我们案例中的兄弟姐妹，因为第一项不是.agenda-event

.agenda-event:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-event .agenda-button 

，下面的一个也不会，因为兄弟元素不是.agenda-magazine。

.agenda-magazine:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ .agenda-magazine .agenda-button

<强>解决方案：

最理想的解决方案是将编译器升级到最新版本，但如果由于某种原因无法实现，那么从 Sassmeister 插入编译后的版本更有意义强> CodePen 进入CSS文件。

或者，您可以避免手动分组选择器并使用@extend指令。这种方法似乎在Fiddle中工作正常，因此我认为即使存在版本不匹配也不会产生任何问题。

.agenda-event {
  &:nth-of-type(4n+1):nth-last-of-type(-n+4),
  &:nth-of-type(4n+1):nth-last-of-type(-n+4) ~ & {
    .agenda-button {
      border-bottom: 0;
      color: red;
    }
  }
}
.agenda-magazine {
  @extend .agenda-event;
}