使ABC订购列表项具有大胆的风格

Question

我有一个html Ordered列表,类型设置为"A"

<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重置应该与它一起使用,或者至少从olelement(list-style-type: none, reset margin)中删除样式,否则该元素将具有两个计数器.

<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,B,C等,而不是文字.

(在Opera 9.6,FF 3,Safari 3.2和IE 7中测试过)

Answer 4

我知道这个问题有点陈旧,但在很多谷歌搜索中它仍然首先出现.我想添加一个不涉及编辑样式表的解决方案(在我的情况下,我没有访问权限):

<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>

Answer 5

你也可以这样做:

ol {
  font-weight: bold;
}

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

因此,HTML中没有"样式"属性