リスト項目の箇条書きをCSS順序付きリストと非順序リストでフルコントロール

Question

<ol>または<ul>リストの箇条書きの色/サイズ/表示文字を変更するにはどうすればよいですか？

ソリューションは両方のリストタイプの変更を処理する必要があります。

p.s.私はこの問題に関するいくつかの密接に関連した質問を見てきましたし、包括的な問題に対する包括的な解決策（2つの主なバリエーション）を与えたかったのです。

Answer 1

オプション1から<ul>順不同リスト：自分のアップサイド

• で元弾丸を置き換えるには：コードを少し変更する必要があります。
• ダウンサイド：個々のリスト項目を制御せず、順序付きリストでは機能しません（オプション2を参照）。

まず、既存のリストの弾丸を取り除く1.ステップ：

ul { 
    list-style: none; 
}

• 基本的なオプションとしては、（ディスク、四角、丸）
• 少ない基本 - 使用画像：ul { list-style: square inside url("sqpurple.gif");からtry it
• 他のimgの例 - 16px Spinnerの箇条書き（「試してください」コードに貼り付け）：
  list-style: square inside url("http://agroportal.lirmm.fr/assets/spinners/spinner_000000_16px-4f45a5c270658c15e01139159c3bfca130a7db43c921af9fe77dc0cce05132bf.gif");

ステップ2.は、リスト項目の情報の前に交換を追加します。

ul li:before { 
     content: "•";  // change what you like 
          // 'before' does not change li styles 

     font-size: 150%;  // a few options 
     padding-right: 5px; 
     color: blue; 
    }

注：Unicodeを使用するためにそれが良いかもしれない "\ 002022" の代わりに "•"

の代わりに：別の記号、織物、アイコンフォント、favicon.ico画像などを使用してください。

ul li:before { 
     content: "4"; font-family:"Webdings"; 
    }

もう一つの例：FontAwesome icon - 追加get-started後： - リストを命じた<ol>

• content: "<i class="fa fa-check-circle"></i>" // fontawesome API

オプション2：元のアイテムナンバリング/レタリングを保つが、<li>のコンテンツからリストスタイルを破りますスタイル：<div>または<span>

• Upsides：順序付きリストに対して機能し、各リスト項目を個別にまたはまとめて制御します。
• ダウンサイド：各<li>のタグ、少ない弾丸コントロール。

HTML

<ol class="ol--bullet-style"> 
    <li><div class="li--default">Foo</div></li> 
    <li><div class="li--default">Foo</div></li> 
    <li><div class="li--default">Foo</div></li> 
</ol> 

CSS：

.ol--bullet-style { 
    color: red;   // some options 
    font-size: 150%; 
    font-decoration: underline; 
    font-family: Courier New; 
} 

.li--default { 
    font-family: Garamond; 
    font-size: 100%; 
} 

またはクラスが含まれており、あなたのCSSでこれを使用していないのdivやspanタグと基本行きます：

ul li div { 
    color: blue; 
} 

注：<p>タグは、独自の特別なデフォルトが付いているので、お勧めできません。