使ABC有序列表项具有粗体样式

Question

我有一个html有序列表，类型设置为"A"

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

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

我想将字母A、B、C的样式设置为粗体。我尝试使用CSS设置font-weight:bold;，但它没有起作用。有什么建议吗？

- Yaakov Ellis

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

- peirix

---

如果你想的话，也可以使用<div>代替<span>。 - nu everest

@nueverest div是块级元素，我认为不要嵌套它们。 - Sinaesthetic

为什么我需要使用CSS来处理li span并设置字体为normal？ - Timo

Answer 2

作为一种替代而更优秀的解决方案，您可以在 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/

- Speed

---

在这之前我怎么不知道CSS计数器？真是太棒了（好的那种意思）。 - hemp

这个很好地运作了。我唯一的批评是你应该用“list-style-type”而不是“list-type” :) 哦，还有这在IE7及以下版本中无法工作，但是嘿，很多东西都不能。 - Coder

如果列表项的内容超过一行，那么排版就不太好了。也就是说，我认为大多数人希望第二行的开头与第一行的开头对齐。 - Metzed

@MarkR21 请查看 https://dev59.com/6mkv5IYBdhLWcg3wsCpO - Speed

很棒的东西。以前从未了解过CSS计数器。 - lislis

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

- Alex Rozanski

---

99%的浏览器修复都涉及添加额外的标记。也许有一天这不再是这种情况。 - John Magnolia

Answer 4

你也可以这样做：

ol {
  font-weight: bold;
}

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

所以您的HTML中没有“style”属性。

- Pierre Chavaroche

---

在尝试了本页面和其他页面的几种其他方法后，简单地使OLs数字加粗，我目前最喜欢这种方法；至少到目前为止。 最干净，最简单。 我所做的唯一一件事就是给OL添加一个类，以便我可以像打开或关闭一样打开或关闭加粗的OLs... - RBV

Answer 5

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

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

- BoomShadow

---

非常适合博客作者等人使用。谢谢！ - hmijail

Answer 6

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

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

- SalsaJJ

Answer 7

你也可以这样做：

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

这是给初学者的简单代码。

这段代码已在“Mozilla、Chrome和Edge”中进行了测试。

- syed yasser ahmed