3

私の知る限り、どのlist-style-typeプロパティを設定しても、リストを区切る数字または文字の後にピリオド（.）が続きます。これを、たとえば右括弧（)）に変更したり、完全に削除したりする方法はありますか？

コンセプト

これが私がやりたいことを示す不適切なCSSです：

<HTML>
<HEAD>
<STYLE>
OL{
  list-style-type:decimal;
  list-style-punctuation: ')';
}
OL.onlyNumbers{
  list-style-punctuation: none;
}
</STYLE>
</HEAD>
<BODY>
<OL>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
<OL CLASS=onlyNumbers>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
</BODY>
</HTML>

そして、これが私がブラウザで見たいものです：

  1) Won
  2) Too
  3) Tree
  4) Fore
100) Won Hun Dread

  1 Won
  2 Too
  3 Tree
  4 Fore
100 Won Hun Dread

私は一般的にjQueryやJavaScriptとは何の関係も望んでいません。これを適切なHTML5とCSS3にできるだけ近づけたいと思います。

4

1 に答える 1

8

before疑似要素とCSScounter機能を使用できます。

body {
    counter-reset:withBrackets;
    counter-reset:onlyNumbers;
}    
ol {
    list-style:none;
}
ol:not(.onlyNumbers) li {
    counter-increment:withBrackets;
}
ol:not(.onlyNumbers) li:before {
    content:counter(withBrackets) ") ";
}
ol.onlyNumbers li {
    counter-increment:onlyNumbers;
}
ol.onlyNumbers li:before {
    content:counter(onlyNumbers) " ";
}

作業デモをご覧ください

于 2012-09-16T18:46:26.887 に答える