css - 如何定位 CSS :last-of-type of consecutive elements (not ALL within a parent element)

Question

也许这在 CSS3 中是不可能的，但我正在尝试在段落中有多个连续的脚注实例时自动插入逗号分隔符。

当段落后面有另一个脚注时，就会出现问题。您会在示例 2 中注意到在脚注 2 之后插入了逗号。

我尝试将其切换并使用 first-child，但这只是以相反的方式结束相同的问题。

sup:not(:first-child)::before {
    content: ",";}

sup:last-child::before {
    content: "";
}

任何人都知道一种方法来定位最后一个类型，当它被任何其他内容而不是另一个相同类型的内容取代时？

sup:after {
        content: ",";
    }

sup:last-of-type:after {
        content: "";
    }

<h2>Example 1</h2>
<p>lorem upsum<sup>1,2</sup></p>

<h2>Example 2</h2>
<p>lorem upsum<sup>1,2</sup> flotsam jetsum<sup>3</sup></p>

Answer 1

您已经有了答案:您需要做的就是删除所有 CSS，因为它实际上什么都不做。

sup:after {
   content: ",";
}

sup:last-of-type:after {
        content: "";
    }

在您的 html 中，您的代码是 <sup>1,2</sup> ，这意味着您已经在手动输入 ,对于 <sup> 内的多个值.

那个特别的,在 <sup> 内具有多个值的不是由上述 CSS 生成的，而只是因为您手动输入它才存在。

在 <p> 中只有一个 <sup> ，它没有 , 的原因是因为你的课sup:last-of-type:after .因为只有一个 <sup> 的实例。它也被认为是最后一个，因此，它添加了 "" 的内容到最后。这又一次什么都不做，因为默认情况下它是空的。

<h2>Example 1</h2>
<p>lorem upsum<sup>1,2</sup></p>

<h2>Example 2</h2>
<p>lorem upsum<sup class="sup-multiple">1,2</sup> flotsam jetsum<sup>3</sup></p>