htmlリストの番号のスタイルを設定するには？

Question

の番号の順序を変更することはできますか？

注文リストolをwikihowステップのようなものにすることを予定しています（CSSのみを使用）。ここで

はと遊ぶのが一例です：あなたは数字のためにしたいフォントサイズとスタイルあなたの順序付きリスト....のhttp://jsfiddle.net/ejRzy/1/

Answer 1

は、それはCSS3ではなく、100％のクロスブラウザ（つまりIE7）を使用して行うことができます。擬似：前の要素とカウンターリセットとカウンターインクリメントを使用すると、リストスタイルを非表示にして独自のものを作成できます。ここ

はどのように概説記事である：Styling ordered list numbers

とhereはその記事から構築されたデモです。恐ろしいリンク切れの場合も

- ここに必要な主なCSSのコードがある（これは任意の順序付きリストに適用することができます）

ol { 
    counter-reset:li; /* Initiate a counter */ 
    margin-left:0; /* Remove the default left margin */ 
    padding-left:0; /* Remove the default left padding */ 
} 
ol > li { 
    position:relative; /* Create a positioning context */ 
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ 
    padding:4px 8px; /* Add some spacing around the content */ 
    list-style:none; /* Disable the normal item numbering */ 
    border-top:2px solid #666; 
    background:#f6f6f6; 
} 
ol > li:before { 
    content:counter(li); /* Use the counter as content */ 
    counter-increment:li; /* Increment the counter by 1 */ 
    /* Position and style the number */ 
    position:absolute; 
    top:-2px; 
    left:-2em; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    width:2em; 
    /* Some space between the number and the content in browsers that support 
     generated content but not positioning it (Camino 2 is one example) */ 
    margin-right:8px; 
    padding:4px; 
    border-top:2px solid #666; 
    color:#fff; 
    background:#666; 
    font-weight:bold; 
    font-family:"Helvetica Neue", Arial, sans-serif; 
    text-align:center; 
} 
li ol, 
li ul {margin-top:6px;} 
ol ol li:last-child {margin-bottom:0;}​ 

このコードは、カスタム順序付きリストを生成します。あなたが求めているスタイルではありません。私はあなたにカスタマイズ作業を残します:)歓声

Answer 2

種類、スパン内のすべてのあなたのリストの項目をラップし、それらを与えます異なるスタイル。

http://jsfiddle.net/keith_nicholas/MEHXj/