nth-child，为每个 4 的倍数的元素分配样式

Posted 2023-03-06

【中文标题】nth-child，为每个 4 的倍数的元素分配样式

【英文标题】：nth-child, assign styles to every element that is a multiple of 4

【发布时间】：2014-01-11 18:39:00

【问题描述】：

我有一个基于 4 列网格的布局，我想以与此类似的方式应用 CSS3 动画；

<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->
<div class="block"></div><!-- animation-duration: 1s -->
<div class="block"></div><!-- animation-duration: 2s -->
<div class="block"></div><!-- animation-duration: 3s -->
<div class="block"></div><!-- animation-duration: 4s -->

所以基本上，第一列中的项目的动画持续时间为 1 秒，第二列中的项目的动画持续时间为 2 秒，等等。

如何使用 nth-child 实现这一目标？

【问题讨论】：

使用 :nth-child(4n)

你试过什么？一旦你了解了 nth-child，答案就很明显了……

你用jquery标记了这个和 css。您到底在寻找什么？

您可能会发现这很有用：nth-​​child tester css-tricks.com/examples/nth-child-tester

【参考方案1】：

要回答您的问题按照书面说明，您需要四种样式，每个动画持续时间一种：

.block:nth-child(4n) 
    animation-duration: 1s;


.block:nth-child(4n+1) 
    animation-duration: 2s;


.block:nth-child(4n+2) 
    animation-duration: 3s;


.block:nth-child(4n+3) 
    animation-duration: 4s;

an + b 的:nth-child syntax 允许您用a 表示循环频率，用b 表示初始偏移。每个持续时间样式都需要自己的b 偏移量。

但是，如果您想将其推广到 m 种样式（而不仅仅是 4 种），您可能应该通过脚本应用样式，而不是手动编写它们。

【讨论】：

投了赞成票！如果 OP 没有使用 Sass 或 Less 并且想要更轻松地更新，这可能很有用：$('.block').css('animation-duration', function(i) return ( i % 4 + 1 ) + 's'; );

【参考方案2】：

如果您正在寻找 jquery 代码，那么试试这个：

Working Fiddle

$(document).ready(function()
$('#maindiv .block').each(function()
duration=($(this).index()%4+1)*1000 ;
$(this).css('animation-duration',($(this).index()%4+1)+'s')
)
)