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没有提供选择“最后一堂课”的方法。考虑使用:: after将特定类应用于目标，或者您可以使用一些JavaScript来进行选择。

Answer 2

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

＆＃13;

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)";
}

＆＃13;

<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>

＆＃13;

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

Answer 3

~~据我所知，我不认为你可以单独用CSS做这件事。~~ 看起来鲍里斯是对的。

.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

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

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

使用':: after'选择器和直接兄弟'+'选择器

3 个答案: