Question

在页面中，我们有8个图像，可以在DOM中的任何位置（非常复杂的逻辑，与手头的问题无关）。我想要的是偶数图像具有蓝色边框，而奇数图像具有红色边框。

我已经尝试了这些并且没有它们正在工作

.timeline-details-image:nth-of-type(even) img
{
    border: 2px solid blue;
}
.timeline-details-image:nth-of-type(odd) img
{
    border: 2px solid red;
}

.timeline-details-image img:nth-of-type(even)
{
    border: 2px solid blue;
}
.timeline-details-image img:nth-of-type(odd)
{
    border: 2px solid red;
}

正在发生的事情是，由于这些图像没有共同的父级，因此每个图像在其父容器中最终都是奇数（因为它将是父容器中的第一个图像），因此它们最终都会变为红色边框。任何人都可以建议我做错了什么？

Answer 1

将JS用于奇数和偶数图像边框，如下所示

  $(document).ready(function()
   {
    $(".timeline-details-image:even").css("border", "1px solid #cccccc");
    $(".timeline-details-image:odd").css("background", "1ppx solid #ce0000");
}

Answer 2

单独的CSS不会为你做那个，你需要一些javascript。如果你使用的是jQuery，你可以这样做：

$(document).ready(function() {
    $('.timeline-details-image').each(function(index) {
        // check if number is even, then apply class 'even' 
        if (index % 2 === 0) $(this).addClass('even');
    });
});

Answer 3

您可以为奇数图像添加两个新的时间轴 - 细节 - 图像 - 奇数 - 时间轴 - 细节 - 图像 - 甚至是HTML中的偶数图像。

并添加以下CSS：

.timeline-details-image-odd{border: 2px solid red;}

.timeline-details-image-even{border: 2px solid blue;}

Answer 4

根据@ 124c41的回答和上述评论，要求是：

身体内的替代图像

答案似乎需要Javascript

JQuery看起来像这样。

$(document).ready(function() {
    $('img').each(function(index) {
        // even //
        if (index % 2 === 1) $(this).css("borderBottom", "10px solid red");
        // odd //
        if (index % 2 === 0) $(this).css("borderBottom", "10px solid blue");
    });
});

JSFIDDLE DEMO

当元素不在同一个父元素时偶数奇数的css选择器

4 个答案: