将'::after'选择器与直系同级'+'选择器一起使用

Question

我有这个基本的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>

我需要在类改变位置之前将::after样式应用于每种类型的最后一个元素。
即我需要将样式应用于上面示例中的 1、3 和 4
这些元素将动态生成

我尝试过CSS选择器，例如：

.right + .right::after, .left + .left::after { ... }
//this misses the individual elements
.right::after, .left::after { ...apply style... }
.right::after + .right, .left::after + .left { ...remove ::after style from preceeding elements... }
//this was an attempt to remove the generally applied style from preceeding elements

任何帮助、想法或建议将不胜感激。

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

Answer 1

CSS 无法做到这一点。正确的解决方案是对行进行分组;如果可能，请使用常识性的语义 HTML。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.left {
  background: #6AF;
}
.right {
  background: #6CF;
}
.left > li:last-child::after {
  content: " (last child of .left)";
}
.right > li:last-child::after {
  content: " (last child of .right)";
}

<div class="cotnainer">
  <ul class="left">
    <li>1</li>
  </ul>
  <ul class="right">
    <li>2</li>
    <li>3</li>
  </ul>
  <ul class="left">
    <li>4</li>
  </ul>
  <ul class="right">
    <li>5</li>
  </ul>
</div>

^{我在上面的例子中使用了ul/li，但看看是否有更好的元素与语义匹配。}

Answer 2

不幸的是，

CSS 没有提供选择"最后一个类"的方法。考虑使用 ：：after 将特定类应用于目标，或者您可以使用一些 JavaScript 进行选择。

Answer 3

据我所知，我认为你不能单独用CSS做到这一点。看起来鲍里斯是对的。

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

可能会这样做。你每天都能学到新东西！

---

但是，您可以使用jQuery来做到这一点，如下所示：

杰奎里

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

.CSS

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

在这里小提琴：http://jsfiddle.net/2hxxhumq/