如何仅使用 CSS 找到最后一个/第一个不为空的孩子？

Question

假设我有这个：

<div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span></span>
  <span></span>
</div>

并且想要为每个非空元素添加逗号，除了最后一个非空元素（不是最后一个子元素）。所以从“1 2 3”我想要“1, 2, 3”。

排除最后一个孩子很容易 Fiddle 但是这最后一个非空。

Answer 1

我很确定我在这里找到了每次和在每种可能的情况下都有效的解决方案：https : //jsfiddle.net/4ktq3d3u/1 :)

HTML

<div>
    <span></span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span></span>
    <span>4</span>
    <span></span>
    <span>5</span>
    <span><span>
</div>

CSS

span:not(:first-child):not(:empty)::before {
    content: ', ';
}

span:empty + span:not(:empty)::before {
    content:''  
}

span:not(:empty) ~ span:empty + span:not(:empty)::before {
    content:', '
}