web-dev-qa-db-ja.com

リストスタイルタイプの自動生成された番号に色を付ける方法は？

私は次のリストを使用しています：

<ol id="footnotes">
    <a name="footnote1"><li></a>This is the first footnote...</li>
    <a name="footnote2"><li></a>This is the second footnote...</li>
</ol>

次の.cssを使用します。

#footnotes {list-style-type: decimal;
            list-style-color: #f90;
            }

#footnotes li
           {color: #000;
            }

#footnotes a li,
#footnotes li a
           {color: #f90;
            }

目的は、li/footerテキスト自体を黒（#000）にし、数字のスタイルをオレンジ色（#f90）にすることです。

list-style-colorプロパティを使用してみましたが、これはWeb開発者ツールバー（FF3.0.8/Ubuntu 8.04）を混乱させる以外に何もしません。Midoriも同様にオレンジ色の数字を表示しません（試したと思います）念のため、Webkitエンジンで...）。

何か案は？

HTMLを編集しました（タグは必ずしもアンカーとして機能するために何かを囲む必要がないことを思い出したため）：

<ol id="footnotes">
    <li><a name="footnote1"></a>This is the first footnote...</li>
    <li><a name="footnote2"></a>This is the second footnote...</li>
</ol>

<span>内で<li>を使用することを提案するものへの応答として...ええ。それは起こった、私は提案と時間がかかったことに感謝したが、私はもっと...セマンティックなオプションを探していました（私は...

現状では、おそらくそのアプローチを使用すると思います。私は別のピート・ミショーの答えを受け入れましたが、そのまったくの有益な性質のために答えました。ありがとう！

htmlcssxhtml
27
David Thomas

CSS3には、 生成および置換されたコンテンツモジュール を使用する方法があります。この手法では、HTMLに追加のマークアップを追加する必要はありません。このような何かがトリックを行う必要があります：

ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: red;
}
48
Mårten Björk

これは動作するはずです：

<ol id="footnotes">
    <li><span>This is the first footnote...</span></li>
    <li><span>This is the second footnote...</span></li>
</ol>

#footnotes li { color: #f90; }
#footnotes li span { color: #000; }
32
Can Berk Güder

このシンプルなCSS3ソリューションは、ほとんどのブラウザー（IE8以上）で機能します。

ul {
    padding-left: 14px;
    list-style: none;
}
ul li:before {
    color: #f90;
    content: "•";
    position: relative; 
    left: -7px;
    font-size: 18px;
    margin-left: -7px;
}

状況に応じて、paddingおよびmarginの値を調整する必要がある場合があります。

8
Webmike

最近、同様の問題が発生し、追加のタグを使用せずにリストマーカーのスタイリングを実現するスマートな方法を説明する記事 Styling順序リスト番号 を見つけました。この記事では基本的に、順序付きリストについて次のように述べています。

重要なのは、リストからデフォルトの番号を削除した後、CSSが生成したコンテンツを使用してカウンター番号を作成および挿入することです。

詳細については、記事を参照してください。

6
Ben

これはどう？

<head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>
2
John Gietzen

不完全であることがわかった他の回答のいくつかを組み合わせて、これが最も完全であることがわかりました。階層のさまざまなレベルでsub style-typesを考慮し、liが複数行（：after一番下の行に配置するため、：before）を使用します。

サイドキャラクターのカスタマイズにも注意してください：1. 1)。Chromeでテスト済み。

ol { counter-reset:li; }
ol li {
    list-style-type:none;
    counter-increment:li;
    position:relative;
}
ol li:before {
    content:counter(li) ")";
    position:absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }
2
Ael