如何获得Tumblr主题，以逗号分隔标签？

在Tumblr主题的每个帖子类型的结尾，我都有以下代码：

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

（我知道这 不完全是一种集体行为。这是我的四秒钟变通办法，这不是此问题的目的，请多多包涵！）

在带有多个标签的帖子上，结果如下：

如果我只是在后面加上一个逗号{Tag}，则会<a href="{TagURL}">{Tag},</a>得到：

最后一个标签有一个多余的逗号，只有一个标签的帖子也会在此方法下显示额外的逗号。

如何添加正确数量的逗号？

更新：

杰里米（Jeremy）在下面的回答符合我的要求。但是，为了使自己变得“符合标准”（尽管我不知道为什么使用IE8的人会读我的tumblr），我尝试实现w3d的建议。所以现在CSS看起来像：

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

现在的结果是：

（nb：换行符无关-我是故意添加的。）

所以。什么地方出了错？

我有另一个主意。

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

这将在每个标签之后添加一个带有“ tagtail”类的跨度。

然后，添加以下CSS：

span.tagtail + a.tag:before {
   content:", ";
}

这将选择在尾标跨度之后的每个标记锚（因此，除了第一个以外的每个）。这样，我们避免了使用第一个或最后一个选择器。

更新：

如果您想确保逗号的样式与锚点不同，那么我想您也可以这样做：

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

然后将其样式设置为：

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

但是，这可能需要进行调整，因为浏览器在覆盖规则上有所不同。

尝试一些CSS技巧（要使其在IE 8中正常工作，您需要在文档顶部指定<！DOCTYPE>）。

<p class="permalink">
       <a href="{Permalink}">{NoteCountWithLabel}</a>
       {block:HasTags} &nbsp;&nbsp; # filed under:
          {block:Tags}  
             <a class="tag" href="{TagURL}">{Tag}</a>
          {/block:Tags}
       {/block:HasTags}
</p>

然后，添加以下CSS：

a.tag:after {
   content:",";
}

a.tag:last-child:after {
   content:"";
}

它使用伪选择器：after和很少使用的content属性在事实之后添加逗号。第二条规则将覆盖序列中最后一个标签的content属性。

接下来是@Jeremy的答案...要支持IE8（和IE7），您将需要使用first-child伪类，而不是last-child。IE8不支持last-child，即使在符合标准的模式（即DOCTYPE）下也是如此。

a.tag:before {
   content:", ";    /* comma + space */
}

a.tag:first-child:before {
   content:"";
}

编辑：但是，这种方法有一点警告，您可能必须删除</a>标记/主题关闭后出现的所有其他空白。

      {block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

编辑： OS X上Safari 5.0中的提琴输出的屏幕截图：

:before以先前答案中的建议为基础。如果您使用的是标签列表，则很有可能会将它们放在列表中。如果您确实使用每个li标签:before而不是标签内的li标签-每个标签将是该标签的第一个孩子，li但是只有一个li标签将是ulor ol标签的第一个孩子！我使用的是描述列表，因为我想在dt标签中放入“标签”，因此对dd标签也是如此。

然而，使用描述列表具有增加的复杂性。第一个dd标签永远不是标签的第一个子dl标签，它是dt标签，因此您需要使用nth-child(2)它来定位它。使用的不利之处nth-child(2)在于，它再次不符合IE 8，因此该问题再次出现。

这是我的解决方案。

{block:HasTags}
<div class="t">
<dl>
<dt>Tags</dt>
{block:Tags}
<dd><a href="{TagURL}" class="tag">{Tag}</a></dd>
{/block:Tags}
</dl>
</div>
{/block:HasTags}

此外，根据先前的答案，他们建议在content（content: ", ";）中使用空格是可行的。它行得通吗？我无法使其正常工作，但可以使用“ \ 00a0”。

.t dl {
    margin: 0px;
    list-style-type: none;
}
.t dt {
    margin: 0px 5px 0px 0px;
    float: left;
}
.t dd {
    margin: 0px;
    float: left;
}

.t dd:before {
    padding: 0px 5px 0px 0px;
    content: ",\00a0";
    float: left;
}

.t dd:nth-child(2):before {
    padding: 0px 0px 0px 0px;
    content: "";
    float: left;
}