没有考虑类名的第N个子选择器？

Question

我有一张照片列表：

<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;
    }
}

这是一张图片来说明这一点：

每隔一个蓝色元素不需要边距，以正确适合网格。类似地，每三个绿色元素不需要边距。

我尝试使用上面的第n个子选择器来定位它们。列表中的第二个元素实际上是第一个.red元素，它被设置为margin-right：0;

似乎选择器正在覆盖类名。也许不考虑类名，我知道我可以将div中的红色项目分组并定位它们，但这不是解决方案，因为列表是动态生成的，我想保留其结构。

基本上，用户可以在网格中上传尽可能多的照片，其结构如下：

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

关于如何解决这个问题的任何想法？

Answer 1

nth-child(2)会选择ul中的所有其他元素，而nth-of-type(2)会选择li中的所有其他ul元素。不幸的是，你要做的事情是不可能只使用CSS，你不能选择具有特定类的所有其他元素。

您需要更改HTML，例如 - 当您生成列表时，计算布鲁斯的数量并给予其他所有“无边际”类别，并为每三个绿色做同样的事情。