我有这个基本的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
任何帮助，想法或建议，将不胜感激。
编辑：由于这个问题对我来说仍然是一个问题，因此我开始悬赏，以进一步征求解决方案和想法，以实现预期的结果。
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，但是看看是否有一个更好的元素可以匹配语义。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句