Html 使用'；：：在'之后；具有直接同级的选择器'+'；选择器

我有一个基本的HTML结构：

<div class="cotnainer">
    <div class="left">  1 </div>
    <div class="right"> 2 </div>
    <div class="right"> 3 </div>
    <div class="left">  4 </div>
    <div class="right"> 5 </div>
    <!-- continuing on in a variable order -->
</div>

如有任何帮助、想法或建议，将不胜感激

---

编辑：由于这个问题对我来说仍然是一个问题，我开始悬赏，进一步征求解决方案和想法，以达到预期的结果。

不幸的是，CSS没有提供选择“最后一个类”的方法。考虑应用一个特定的类以：：之后，或者你可以使用一些JavaScript来做你的选择。 看起来鲍里斯是对的

.left + .right,
.right + .left {
    color:red;
}

我可能会这么做。 你每天都能学到新东西

---

但是，您可以使用jQuery执行以下操作：

JQuery

var lastElemHasClassLeft = false;
    $('.cotnainer > div').each(function(key, val) {
    if (lastElemHasClassLeft != $(this).hasClass('left')) {
        $(this).addClass('change');
    }
    lastElemHasClassLeft = $(this).hasClass('left');
});

CSS

---

在这里摆弄：

CSS不能这样做。正确的解决方案是将行分组；如果可能，请使用常识语义HTML

ul{
保证金：0；
填充：0；
列表样式类型：无；
}
.左{
背景：#6AF；
}
.对{
背景：#6CF；
}
.左>李：最后一个孩子：：之后{
内容：“（左的最后一个孩子）”；
}
.右>李：最后一个孩子：：之后{
内容：“（权利的最后一个孩子）”；
}

一,


二,
三,


四,


五,

注意：您使用

.left+left:：after

，使用如下：

.left+.left:：after

（漏点）您不能使用类似

.left+.right:：before{}

？的内容，而不是将

：after

应用于每种类型的最后一个元素，您可以将

：：before

应用于更改后的第一个元素吗？

：：before

方法不起作用，因为我需要与前一个元素相对的样式。不过谢谢。不幸的是，您不能使用CSS来选择标记中的前一个元素。您是否考虑过在类更改后在标记上使用before伪元素？否则，由于您的内容是动态的，您将需要JS来选择您的元素。谢谢。@AlexanderO'Mara最后一个类型伪选择器只能选择元素（标记），而不能选择类。如果OP可以对元素进行分组，他也可以很容易地用附加类标记“最后一个组”元素。其目的是用HTML而不是CSS来实现所需的结果。您的解决方案更改HTML结构并提供CSS。如果没有提供的CSS，“HTML解决方案”实际上什么都做不了。向“组中最后一个”元素添加额外的类也是HTML结构+CSS中的一个变化，以适应它。但在后一种情况下，HTML调整和所需的CSS都较小。除非更改标记或添加帮助类，否则没有纯CSS解决方案。我要求不要对抗CSS选择器；如果数据是某种类型的组（这是我的假设），那么将其分组。

var lastElemHasClassLeft = false;
    $('.cotnainer > div').each(function(key, val) {
    if (lastElemHasClassLeft != $(this).hasClass('left')) {
        $(this).addClass('change');
    }
    lastElemHasClassLeft = $(this).hasClass('left');
});

.change::after {
    content: 'hello';
}