html - ABC注文リストアイテムを大胆なスタイルにする

Question

タイプが「A」に設定されたhtmlの順序付きリストがあります

<ol type="A">...</ol>

したがって、各リスト項目はA、B、Cなどで始まります。

A、B、Cの文字を太字にスタイル設定したいと思います。font-weight：bold;を設定してみました。css経由ですが、機能しませんでした。これを行う方法について何か提案はありますか？

Answer 1

少しチートですが、うまくいきます：

HTML:

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS:

li span { font-weight: normal; }

Answer 2

代替の優れたソリューションとして、before 要素でカスタム カウンターを使用できます。余分な HTML マークアップは必要ありません。それと一緒に CSS リセットを使用するか、少なくともol要素 ( list-style-type: none, reset margin) からスタイルを削除する必要があります。そうしないと、要素に 2 つのカウンターが含まれます。

<ol>
    <li>First line</li>
    <li>Second line</li>
</ol>

CSS:

ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}

例: http://jsfiddle.net/xpAMU/1/

Answer 3

スタイルを正しく適用したこと、またはリストに干渉する別のスタイルシートがないことを確認しますか? 私はこれを試しました：

<ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>

次に、スタイルシートで:

ol {font-weight: bold;}
ol li span.label {font-weight:normal;}

そして、テキストではなく、、などを太字にしましたA。BC

(Opera 9.6、FF 3、Safari 3.2、IE 7 でテスト済み)

Answer 4

li::marker別のさらに短い解決策は、現在広くサポートされている を利用することです。そのようです：

ol li::marker {
        font-weight: bold;
}

Answer 5

次のようなこともできます。

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

初心者向けのシンプルなコードです。

このコードは、「Mozilla、chrome、および edge..