gpt4 book ai didi

css - 如何正确循环 nth-of-type?

转载 作者:行者123 更新时间:2023-11-28 12:29:03 27 4
gpt4 key购买 nike

<分区>

我意识到网上和论坛上有大量关于此的信息。我已经通读了很多,并尝试了几种不同的方法,但出于某种原因,我无法理解为什么这对我不起作用。

我有一系列文章通过循环添加到页面中。我希望实例 1、4、7 等的 cycle-colour-bg 类的背景颜色相同,然后更改实例 2、5、8 等的背景颜色。 ,然后为实例 3、6、9 等设置第三种颜色。

这是我在循环内部的标记(针对每个实例):

<div class="col-sm-4">
<article class="masonary flex-cell">
<div class="featured-image-secondary inner-border-10">
<img src="some-image-url">
</div>

<div class="post-body-secondary cycle-colour-bg">
<p class="fw700 post-title-secondary void-colour">Some Title</p>
<a href="Some-Link">Read More</a>
</div>
</article>
</div>

这是我尝试的最后一点 CSS:

.masonary:nth-of-type(3n+1) .cycle-colour-bg {
background-color: #707272;
}

.masonary:nth-of-type(3n+2) .cycle-colour-bg {
background-color: #57caee;
}

.masonary:nth-of-type(3n+3) .cycle-colour-bg {
background-color: #106db6;
}

我已经尝试了 nth-of-typenth-child,我已经尝试将第 n 个选择器添加到 cycle-colour-bg 类和它之前的 div。我不知道为什么我不能全神贯注于此,但非常感谢任何能为我指出显而易见的事情的帮助。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com