Isotope砌体布局模式的列特定样式

Question

我有一个带有砖石布局的同位素画廊：

https://codepen.io/Deka87/pen/owVqmy

JS：

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry'
});

CSS：

.grid-item {
    width: 50%;
}

这基本上将画廊分成两列。有没有办法在案例中添加第一列/第二列特定样式？即我希望第一列的所有图像都有绿色边框，第二列的图像是红色的。提前谢谢！

Answer 1

似乎可以使用CSS设置第一列元素的样式：

.grid-item[style*="left: 0;"] {
    border-color: green;
}

认为左列项目的左侧属性设置为0。

Answer 2

假设.grid元素的子元素的顺序保持不变，您可以通过为.grid className应用CSS选择器来解决此问题，如下所示：

.grid > div:nth-of-type(odd) { 
    border: 1px solid green; 
}

.grid > div:nth-of-type(even) { 
    border: 1px solid red; 
}

请注意，我使用odd的{​​{1}}和even值来获得理想的结果。