58

我有一个类型设置为“A”的 html 有序列表

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

因此，每个列表项将以 A、B、C 等开头。

我想将 A、B、C 字母设置为粗体。我试过设置 font-weight:bold; 通过css，但它没有用。关于如何做到这一点的任何建议？

4

7 回答 7

90

有点作弊，但它有效：

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; }
于 2009-05-14T11:58:48.703 回答
49

作为替代和卓越的解决方案，您可以在 before 元素中使用自定义计数器。它不涉及额外的 HTML 标记。CSS 重置应该与它一起使用，或者至少从ol元素 ( 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/

于 2013-01-20T11:59:37.353 回答
10

您确定您正确应用了样式，还是没有其他样式表干扰您的列表？我试过这个：

<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 中测试过）

于 2009-05-14T11:59:42.353 回答
7

我知道这个问题有点老了，但它仍然出现在很多谷歌搜索中。我想添加一个不涉及编辑样式表的解决方案（在我的情况下，我没有访问权限）：

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

于 2015-08-03T18:45:17.453 回答
7

你也可以这样做：

ol {
  font-weight: bold;
}

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

所以你的 HTML 中没有“样式”属性

于 2016-04-27T13:53:14.050 回答
0

你也可以这样做：

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

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

这是初学者的简单代码。

此代码已在“Mozilla、chrome 和 edge..

于 2018-06-29T05:41:58.897 回答
0

另一个更短的解决方案是利用li::marker现在广泛支持的. 像这样：

ol li::marker {
        font-weight: bold;
}
于 2022-02-04T16:06:07.663 回答