html - 数値 - php 連想配列 カンマ区切り




CSSのカンマ区切りリスト-オックスフォードコンマが欲しい! (2)

私はオックスフォードコンマの不吉な未来を考慮して、 古いCSSトリックを新しい長さに拡張しようとしています。 私はオックスフォードコンマが好きです。 私は自分のインラインリストにそれを使わせたい。 あれは、

このHTMLをお願いします

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

このように表示するには:

apple, orange, & banana

今、私はそれが現れるように得ることができます

apple, orange & banana

このCSSを使う:

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

#taglist li:last-child:after {
  content: "";
}

#taglist li:nth-last-child(2):after {
  content: " & ";
}

しかし、 問題は 、最後のステートメントを単純にcontent: ", & "変更することはできないということです。 好き

I like to eat apples, & bananas

だから3つ以上のリストのために、私は最後から2番目の要素の後にコンマが欲しい。 2つのリストには、コンマは必要ありません。


コメントを残すほどの評判はまだありませんが、参考になるものがあると思います。

私はTaze T. Schnitzelの答えのチャドの改良版のJSfiddleデモを作りました。 私はまたTazeの最初の答えとchadohの最初の答えの試みを含めてコメントアウトしました。 これがデモですhttp://jsfiddle.net/u7rzA/ : http://jsfiddle.net/u7rzA/


私はこの追加の規則を追加しました、それはあなたが望むことをするように見えます:

#taglist li:nth-last-child(3) ~ li:nth-last-child(2):after {
  content: ", & ";
}




css