即使在画廊项目上也选择第 n 个类型

Question

我在寻找在我的网页上创建选择器的正确方法时遇到了一些麻烦。 基本上，我正在构建一个图片库，其中包含两种类型的图片，一种宽度较小（占包装器总宽度的 50%），另一种宽度较大（占包装器总宽度的 100%）。

我正在尝试选择甚至小宽度的图像以在它们的左侧应用边距，但是当小图像和大图像之间存在混合时我遇到了麻烦。 当小图像之间存在大图像时，我的 nth-of-type(2n) 选择器会中断，并且无法正确选择。

我写了一个简单的Codepen来测试它，我似乎无法让它正常工作。

[https://codepen.io/Gekyzo/pen/zZgEYL]

我的目标是选择右边的小，这样我就可以在它们上应用左边框。

谢谢，我们将不胜感激。

Answer 1

:nth-of-type 匹配 type 而不是类。这意味着您必须手动或使用 Javascript 或 jQuery 向偶数类添加类：

$(document).ready(function() {
     $(".small:odd").addClass('green');
});

CodePen