html - CSS3 逗号分隔列表(nth-of-class)

Question

我有一个生成的 html 代码如下。

经验法则:
1)这个html的结构无法修改，因为它是框架自己生成的html代码。
2) 只有纯 css 解决方案。

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="inactive"></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

<div class="wrapper">
<span class="inactive"><span></span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

我打算实现的目标:
逗号分隔符如下。

This is active class 1.
This is active class 1, this is active class 2.
This is active class 1, this is active class 2, this is active class 3.
This is active class 2, this is active class 3.

但是我目前的结果好像不能得到这个。我正在尝试搜索 last-of-class css 选择器(对我来说，如果这个选择器存在，一切都会被简化)但似乎没有这样的 css 选择器。但我想不出 css 逻辑来解决。希望有人能提供帮助。

如果最后一个类 css 存在，我的方法:

.wrapper span > span::after {
   content: ',';
}

.wrapper span:last-child > span::after {
  content: '.';
}

.wrapper span.active:last-of-class > span::after {
  content:'.';
}

JS Fiddle Link

Answer 1

切换逻辑

针对奇数和偶数

使用::before代替::after；现在我们只需要删除第一个事件的子逗号，当它是奇数和偶数时。

1. 用 ::before 给每个跨度一个逗号(除非它是第一个 child )
2. 删除逗号时:
   • 前 2 个 span 处于非事件状态，第 3 个 span 处于事件状态 (奇数)
   • 第一个跨度处于非事件状态，第二个跨度处于事件状态(偶数)
3. 用 ::after 给最后一个跨度加上句号。

魔法酱

.wrapper > span:not(:first-child) > span::before {
    content: ', ';
}

.wrapper > span.inactive:first-child + span.inactive + span.active > span::before,
.wrapper > span.inactive:first-child + span.active > span::before {
    content: '';
}

例子

对于这个例子，display: flex 移除了行内间隙，white-space: nowrap 防止它们在到达视口(viewport)边缘时换行。

.wrapper {
    display: flex;
    white-space: nowrap;
}

.wrapper > span:last-child::after {
    content: '.';
}

.wrapper > span:not(:first-child) > span::before {
    content: ', ';
}

.wrapper > span.inactive:first-child + span.inactive + span.active > span::before,
.wrapper > span.inactive:first-child + span.active > span::before {
    content: '';
}

<h2>Random examples</h2>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="active"><span>This is active class 5</span></span>
    <span class="active"><span>This is active class 6</span></span>
    <span class="active"><span>This is active class 8</span></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="active"><span>This is active class 10</span></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="inactive"></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 8</span></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="inactive"></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 5</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="active"><span>This is active class 10</span></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 5</span></span>
</div>

<div class="wrapper">
    <span class="inactive"></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 6</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="inactive"></span>
</div>


<h2>
Your examples
</h2>
<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
</div>


<div class="wrapper">
    <span class="inactive"><!--<span>This Shouldn't be here, right?</span>--></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
</div>