CSS 有没有办法使有序列表中的数字加粗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21369843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to make numbers in ordered list bold?
提问by notnull
Is there any CSS selector to attach some style to the numerical part of an ordered list only?
是否有任何 CSS 选择器可以将某种样式附加到有序列表的数字部分？
I have HTML like:
我有这样的 HTML：
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
Which should output:
哪个应该输出：
1.a
2.b
3.c
I need to make 1., 2. and 3. bold, while leaving a,b,c regular.
我需要使 1., 2. 和 3. bold，同时保留 a,b,c 常规。
I am aware of the <span>workaround...
我知道<span>解决方法...
回答by dcodesmith
CSS
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) ".";
}
回答by Stefan Gentz
About a year later, but as this might be also interesting for others coming to here in the future:
大约一年后，但因为这对于将来来到这里的其他人来说也可能很有趣：
Another easy possibility would be to wrap the list item content into a <p>, style the <li>as bold and the <p>as regular. This would be also preferable from an IA point of view, especially when <li>s can contain sub-lists (to avoid mixing text nodes with block level elements).
另一种简单的可能性是将列表项内容包装成一个<p>, 样式<li>为粗体和<p>常规。从 IA 的角度来看，这也是更可取的，尤其是当<li>s 可以包含子列表时（以避免将文本节点与块级元素混合）。
Full example for your convenience:
为方便起见，完整示例：
<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>
If you prefer a more generic approach (that would also cover other scenarios like <li>s with descendants other than <p>, you might want to use li > *instead of li > p:
如果您更喜欢更通用的方法（这也将涵盖其他场景，例如<li>s 与 s 以外的后代<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>
(Check the list item 4 here which is ol/li/code and not ol/li/p/code here.
Just make sure to use the selector li > *and not li *, if you only want to style block level descendants as regular, but not also inlines like "foo <strong>bold word</strong>foo."
（检查这里的列表项 4 是 ol/li/code 而不是 ol/li/p/code 这里。只要确保使用选择器li > *而不是li *，如果您只想将块级后代设置为常规样式，但不是内联，如“foo<strong>粗体字</strong>foo”。
回答by KingKongFrog
回答by Giulio
i had a similar issue while writing a newsletter. so I had to inline the style this way:
我在写时事通讯时遇到了类似的问题。所以我不得不以这种方式内联样式：
<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>
回答by Kevinoid
A new ::markerpseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as
CSS Pseudo-Elements Level 4 中::marker添加了一个新的伪元素选择器，这使得粗体样式列表项编号变得如此简单
ol > li::marker {
font-weight: bold;
}
Unfortunately, it is currently only supported by Firefox 68 and up. (See Chrome Bug 457718for Chrome/Blink status.)
不幸的是，它目前仅受 Firefox 68 及更高版本支持。（有关Chrome/Blink 状态，请参阅Chrome 错误 457718。）
回答by Ken Avila
If you are using Bootstrap 4:
如果您使用的是 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>
回答by Thomas Landauer
This is an update for dcodesmith's answer https://stackoverflow.com/a/21369918/1668200
这是 dcodesmith 回答的更新https://stackoverflow.com/a/21369918/1668200
The proposed solution also works when the text is longer (i.e. the lines need to wrap): Updated Fiddle
建议的解决方案也适用于文本较长（即需要换行的行）：更新的小提琴
When you're using a grid system, you might need to do one of the following (at least this is true for Foundation 6 - couldn't reproduce it in the Fiddle):
当您使用网格系统时，您可能需要执行以下操作之一（至少对于 Foundation 6 而言是这样 - 无法在 Fiddle 中重现它）：
- Add
box-sizing:content-box;to the list or its container - OR change
text-indent:-2em;to-1.5em
- 添加
box-sizing:content-box;到列表或其容器 - 或更改
text-indent:-2em;为-1.5em
P.S.: I wanted to add this as an edit to the original answer, but it was rejected.
PS：我想将此添加为原始答案的编辑，但被拒绝了。
回答by Digits
The previous answer has a side effect that turns all types of lists numeric.
<ol type="a">will show 1. 2. 3. 4. rather than a. b. c. d.
上一个答案有一个副作用，可以将所有类型的列表变为数字。
<ol type="a">将显示 1. 2. 3. 4. 而不是 abcd
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) ".";
}
/* Add support for non-numeric lists */
ol[type="a"] > li:before {
content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
content: counter(item, lower-roman) ".";
}
The above code adds support for lowercase letters, lowercase roman numerals. At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess.
上面的代码增加了对小写字母、小写罗马数字的支持。在撰写本文时，浏览器不区分大小写的类型选择器，因此我猜您只能为备用的 ol 类型选择大写或小写。
回答by Lucas Kochek
You also could put around a,b,c and then bold the ul in the css.
你也可以把 a,b,c 放在周围，然后在 css 中加粗 ul。
EXAMPLE
例子
ul {
font-weight:bold;
}
<ul><li><span style="font-weight:normal">a</span></li></ul>
回答by EGC
Pretty late answer, but hopefully someone will find this useful
答案很晚，但希望有人会发现这很有用
I had a situation like this:
我遇到过这样的情况：
List item
a. List item
项目清单
一种。项目清单
Where the first item was <strong>, the sub-element was normal weight and the '1.' just wouldn'tbold.
第一个项目是<strong>，子元素是正常重量和“1”。只是不会大胆。
My solution was via jQuery:
我的解决方案是通过 jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($('ol').has('li').has('strong')) {
$('ol ').css('font-weight', 'bold');
$('ol > li > ol').css('font-weight', 'normal');
}
});
</script>
Hopefully this helps someone!
希望这对某人有所帮助！
