web-dev-qa-db-ja.com

ABCの順序付きリストアイテムを太字スタイルにする

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

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

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

A、B、Cの文字を太字にします。 font-weight：boldを設定しようとしました。 css経由で、しかしそれは機能しませんでした。これを行う方法に関する提案はありますか？

htmlcsshtml-lists
54
Yaakov Ellis

ちょっとした詐欺ですが、動作します：

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; }
82
peirix

代替の優れたソリューションとして、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/

48
Speed

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

<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、B、Cなどを太字にしました。

（Opera 9.6、FF 3、Safari 3.2およびIE 7）でテスト済み

8
Alex Rozanski

私はこの質問が少し古いことを知っていますが、多くのGoogle検索で最初に出てきます。スタイルシートの編集を伴わないソリューションを追加したかった（私の場合、アクセスできませんでした）：

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

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

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

したがって、HTMLに「スタイル」属性はありません

5
Pierre Chavaroche

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

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

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

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

このコードは、「Mozilla、chrome and Edge ..

0
syed yasser ahmed