javascript - 如何为每一行/行的最后一个元素设置不同的样式？

Question

我一直在尝试使用

创建网格

display:inline=block

我需要为每一行/行的最后一个元素设置不同的样式。我试过了

nth-child
nth-of-type

但是，当我使用它时，它会与我的其他网格混淆。那么如何在不添加新类的情况下做到这一点呢？

Answer 1

据我从您的代码中看到的，您不能使用 nth-child 来实现您的目标。我将尝试用一个例子来解释:您希望 class="four"部分的第 4 个和第 8 个子元素为红色。为了使用 nth-child 或 nth-of-type，您必须从他们的 parent 开始引用 child ，即 body 。所以很难说body的 child 列表中的第4个和第8个section class="four"的 child 是多少，一点也不灵活。我认为您以错误的方式使用它，例如 section.four:last-child，这是不正确的。请查收:w3schools link

此外，nth-child 和 nth-of-type 不能与选择器一起使用，而只能与元素一起使用，因此无法执行类似 .four:nth-child 的操作(如果您使用 class= “四个”在你的部分之外)。

因此，不添加更多类的唯一方法是 jquery，如下所示:

$('.four').last().css('background-color', 'red');