web-dev-qa-db-ja.com

<ol>数字と別の色

<ol>
   <li>test</li>
   <li>test</li>
</ol>

次のように表示されます：

  1. テスト
  2. テスト

数字に色を付け、テキストを黒にしたい！

CSSを編集できますが、HTMLにアクセスできません。

htmlcsscolorshtml-lists
53
depo

CSS仕様 は、これを行う例です。残念ながら、Firefox 3では動作しますが、IE7では動作しないようです。

<html>
<head>
    <style>
        ol { counter-reset: item; }
        ol li { display: block; }
        ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>
107
kdgregory

これが機能するかどうかはわかりませんが、そうすべきだと思います：

<li style='color: red;'><span style='color:black;'>test</span></li>

編集する
htmlを編集できない場合、それは不可能だと思います。 HTMLにjavascriptを追加できる場合（頭に1回）、次のようにできます。

$(document).ready( function() {
 $('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});

これにはjQueryライブラリが必要です。
次に、CSSで、赤と黒のクラスをcolor：red/black宣言で設定します。

24
Pim Jager

また、最初の行の下に（リスト番号の下ではなく）左揃えで各リストアイテムのテキストをラップするソリューションもあります。

[〜＃〜] html [〜＃〜]

<ol class="GreenNumbers">
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
</ol>

[〜＃〜] css [〜＃〜]

.GreenNumbers {
    list-style-type: none;
}
.GreenNumbers ol {
    margin-left: 2em;
}
.GreenNumbers li {
    counter-increment: count-me;
}
.GreenNumbers li::before {
    content: counter(count-me) ". ";
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -1.3em;
    top: .05em;
    color: #008000;
    font-weight: bold;
}
14
Peter Lairo

これはあなたが探していることをするはずです：

http://archivist.incutio.com/viewlist/css-discuss/67894

HTML

<ol>
    <li>1 some text here</li>
    <li>2 some more text that can span longer than one line</li>
</ol>

CSS

ol { list-style: none; padding-left: 2em; text-indent: -1em;}

li:first-letter { float: left; 
                  font-size: ??; 
                  color: white; 
                  background: orange; 
                  line-height: 1.0; }

デザインに応じて色と背景を変更したい場合を除きます。

この次のものはやり過ぎですが、リストのスタイル設定方法に関する多くの情報を提供します。

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

-アダム

7
Adam Davis

@kdgregoryのコードは機能しましたが、箇条書きリストに影響しました。 liをol liに変更して、箇条書き項目が影響を受けないようにしました。そのようです：

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }

追伸また、BODYなどの要素にはCSSで大文字を使用することを好みます。そうすると、クラス.bodyおよびid #bodyと簡単に区別できます。

3
Kimball

同様の質問 への答えから

追記として、CSS3では:: marker擬似要素を使用してリストマーカーを簡単にスタイル設定できます。

しかし今のところ、<span>をhtmlに追加する必要があるようです。

1
notruthless

hTMLを編集できないのは残念です... jsはどうですか？

<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }

// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>

<style>
li {color: #DDD;}
li span {color: black;}
</style>

そうでない場合、多分十分なソリューションは

ol {background-color: #DDD;}
li {background-color: white;}
0
y34h

他の人が言ったことを少し広げて、追加の質問の明確化のために、HTMLに触れないCSSからこれを行う組み込みの方法はありません。 HTMLをできるだけクリーンでセマンティックに保ちたい場合は、JavaScriptを使用して、おそらくjQueryのようなライブラリを使用してスタイリングを行い、CSSがより効果的になるようにDOMを調整します。

ただし、情報を伝えるために色を使用することには注意が必要です。色付きの数字の目的が何なのかはわかりませんが、色を使用して情報を表示すると、色覚異常のユーザーはループから抜け出し、アクセシビリティにとっては大したことはありません。

0
cdeszaq

html：

    <ol>
    <li>1 A long bullet here it is long to show how it behaves on a second line</li>
    <li>2 A long bullet here it is long to show how it behaves on a second line</li>
    <li>3 A long bullet here it is long to show how it behaves on a second line</li>
    <li>4 A long bullet here it is long to show how it behaves on a second line</li>
    <li>5 A long bullet here it is long to show how it behaves on a second line</li>
    </ol>

css：

 
 ol {リストスタイル：なし; padding-left：10px; text-indent：0px; margin-left：5px;} 
 
 ol li {color：＃666;} 
 
 ol li：first-letter {color：＃69A8DE; padding-right：5px; margin-left：-15px;}
0
joe