有没有办法让有序列表中的数字变成粗体？
有没有任何CSSselect器只附加一些样式到有序列表的数字部分？
我有HTML像：
<ol> <li>a</li> <li>b</li> <li>c</li> </ol> 应该输出：
1.a 2.b 3.c
我需要使1.，2.和3. 粗体 ，同时留下a，b，c。
我知道<span>解决方法…
反增
CSS
ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; }
DEMO
的jsfiddle：
ol { counter-reset: item; } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; font-weight: bold; }
大约一年以后，但是对于未来其他人来说，这也许也是有趣的：
另一个简单的可能性是将列表项内容包装成<p> ，将<li>为粗体，将<p>为普通。 从IA的观点来看，这也是可取的，尤其是当<li> s可以包含子列表（以避免混合具有块级元素的文本节点）时。
为您提供方便的完整示例：
<html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > p { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> </ol> </body> </html>
如果您更喜欢使用更通用的方法（也会覆盖其他情况，比如带<li>的其他后代<li> <p> ，则可能需要使用li > *而不是li > p ：
<html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > * { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> <li> <code>List Item 4.</code> </li> </ol> </body> </html>
（检查列表项目4是ol / li / code而不是ol / li / p / code，只要确保使用select器li > *而不是li * ，如果只想将块级别的后代设置为有规律的，但也不像“foo <strong>粗体字</strong> foo”。
我在写新闻时遇到类似的问题。 所以我不得不这样插入风格：
<ol> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> </ol>
这是dcodesmith的答案更新https://stackoverflow.com/a/21369918/1668200
build议的解决scheme也适用于文本较长（即行需要换行）： 更新小提琴
当您使用网格系统时，您可能需要执行以下操作之一（至less对于Foundation 6来说这是真的 – 无法在小提琴中重现）：
- 添加
box-sizing:content-box;到列表或其容器 - 或者更改
text-indent:-2em;到-1.5em
PS：我想添加这个作为原始答案的编辑，但它被拒绝。
如果你正在使用Bootstrap 4：
<ol class="font-weight-bold"> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> </ol>
