gpt4 book ai didi

css - 不考虑类名的第 N 个子选择器?

转载 作者:行者123 更新时间:2023-11-28 17:35:20 25 4
gpt4 key购买 nike

<分区>

我有一个这样的照片列表:

<ul class="gallery">
<li class="red"><img src="red.png" alt=""></li>
<li class="blue"><img src="blue.png" alt=""></li>
<li class="blue"><img src="blue.png" alt=""></li>
<li class="red"><img src="red.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
<li class="blue"><img src="blue.png" alt=""></li>
<li class="blue"><img src="blue.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
<li class="green"><img src="green.png" alt=""></li>
</ul>

对应的CSS如下:

.gallery {
list-style-type: none;
li {
float: left;
}
.red {
width: 100%;
margin-bottom: 2%;
}
.blue {
width: 49%;
margin-right: 2%;
}
.green {
width: 32%;
margin-right: 2%;
}
.blue:nth-child(2n) {
margin-right: 0;
}
.green:nth-of-type(3n) {
margin-right: 0;
}
}

这里有一张图来说明这一点:

每隔一个蓝色元素不需要 margin-right 来正确适应网格。同样,每三个绿色元素都不需要 margin-right。

我尝试使用上面的第 n 个子选择器来定位它们,但似乎没有成功。列表中的第二个元素实际上是第一个被设置为 margin-right: 0 的 .red 元素;

类名似乎被选择器覆盖了。也许没有考虑类名,我知道我可以将红色元素分组到一个 div 中并定位它们,但这不是解决方案,因为列表是动态生成的,我想保留其结构。

基本上,用户可以在网格中上传任意数量的照片,其结构如下:

  • 如果他决定上传一张蓝色图片,那么下一张图片也必须是蓝色的以适合网格。
  • 如果他上传了一张绿色图片,那么接下来的两张图片也必须是绿色的才能适合网格。

关于如何解决这个问题有什么想法吗?

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