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 내 텀블러를 읽을 것이다 사용하는 사람이 왜) 나는 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 8을 사용해보십시오 (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태그 만 ul또는 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: ", ";). 작동합니까? 작동하지 않지만 "\ 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;
}