css - 动态定位 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 元素是第一个(也是最后一个元素的第 4 个)，所有跟随它的元素都是 .agenda -事件 项。因此，如果没有这个，.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>

---

在我们的例子中，下面的选择器不会解决 sibling ，因为第一个元素不是 .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 或 < strong>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;
}