有没有 CSS 选择器可以仅将样式附加到有序列表的数字部分？
我的 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>标签来解决这个问题...
有没有一种方法可以使有序列表中的数字加粗？
101
- notnull
3
2可能是重复的问题：如何使ABC有序列表项具有粗体样式。 - Josh Crozier
只需使用 counter-reset 和 list-style-type: none 即可。http://codepen.io/gc-nomade/pen/fdbEm - G-Cyrillus
2ol > li::marker {
font-weight: bold;
}以下提供的解决方案是此问题的最佳答案，请点赞。 - GUNJAN ASWANI
10个回答
114
使用 CSS 属性 counter-increment
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:1.5em;
padding-right:0.5em;
font-weight:bold;
text-align:right;
content:counter(item) ".";
}<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>- dcodesmith
6
2如果您的LI包含P或其他块级元素，则还需要撤消文本缩进，如下所示...
ol > li * { text-indent: 0; }
编辑：抱歉，评论中的代码格式似乎已损坏。 - jenlampton感谢您也添加了text-indent！这个解决方案非常完美！ - spasticninja
当我在这里添加自定义CSS：https://www.hlbenefits.com/best-vegan-vegetarian-protein-sources-2016/时，当编号变为1.1. | 2.1. | 3.1. |等时，我得到了一个奇怪的结果。第二个（1）会变成粗体。所以基本上它添加了另一个编号而没有计数。有人能告诉我这是为什么吗？ - faceoff
@faceoff 将
list-style-type 设置为 none 可以去掉第一个（本地）数字。此外，这个答案中建议的方法很聪明，但如果 li 换行，将使左对齐文本变得困难。 - Ted Nyberg这不尊重具有指定li type="a"、type="i"等的列表。如果您有一个带有字母顺序的列表，并且其中一个项目具有嵌套的罗马顺序列表，则所有项目都变成十进制数字。 - Francisco Zarabozo
@stefan-gentz的回答对我来说更容易实现，因为它涉及到深层列表和不同类型的列表(A,1,a)。 - jgreen
102
在CSS Pseudo-Elements Level 4中添加了新的::marker伪元素选择器，可以轻松地将列表项数字设置为粗体。
ol > li::marker {
font-weight: bold;
}
- Kevinoid
5
42021年最佳解决方案。这个答案比上面的其他答案都要好得多。 - belvederef
3请投票支持最佳解决方案，但不要将其评价得过高。 - GUNJAN ASWANI
2这应该是现在被接受的答案。早期的回答只是聪明的黑客技巧。 - gillytech
2022年的答案已被接受。谢谢。 - notnull
太棒了。一路上都在进行渐进增强。之前已经加入了早期的hack，但后来还需要考虑缩进，这种方式可以让li自然地流动。 - Jarrod McGuire
35
另一个简单的可能性是将列表项内容装入
<p>中，将<li>样式设置为粗体，<p>样式设置为普通。从信息架构的角度来看，这也是更可取的选择，尤其是当<li>包含子列表时（以避免文本节点与块级元素混合）。
以下是完整示例：
<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>
如果您希望采用更通用的方法（也可以涵盖其他场景，例如带有除 <p> 之外的后代的 <li>），则可以使用 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。
如果你只想将块级后代元素样式化为常规元素，请确保使用选择器li > *而不是li *，但不包括像“foo <strong>bold word</strong> foo.”这样的内联元素。
- Stefan Gentz
6
这种方法比上面列出的两种方法更轻便、更好。如果您想将其放在主CSS文件中，但又不希望它在整个应用程序中都生效，请改用类（例如，ol->class-name-1，li->class-name-2）。 - jdnew18
1太棒了！这甚至应该是被接受的答案。有了以下附加代码，您甚至可以对嵌套列表进行规范化，而不需要其中的
<p> 标签：.listClassName li {font-weight: bold;} .listClassName li > *, .listClassName li > * > * {font-weight: normal;} - Frank Conijn - Support Ukraine虽然不太灵活，但这是对最初提出的问题更直接的答案。 - MaxPRafferty
什么是“IA”？ - Peter Mortensen
@peter-mortensen：IA = 信息架构 - Stefan Gentz
我认为这是一个比采纳答案更好的回答 - 实现简单，谢谢！ - Rob Banmeadows
21
ol {
counter-reset: item;
}
ol li { display: block }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}
- KingKongFrog
18
我在写一封通讯时也遇到了类似的问题。因此，我不得不以这种方式内联样式：
<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>
- Giulio
2
唯一的解决方案也适用于电子邮件（在所有电子邮件模板中，因为我们无法在那里提供CSS）。 - afzalex
可以用于电子邮件。天才。这是其中一个“哦，它如此简单，我真的很蠢没有想到”的解决方案。干得好，伙计。 - Jimbo Jonny
5
来自dcodesmith的https://dev59.com/H2Ei5IYBdhLWcg3wWLIS#21369918答案具有将所有类型的列表变为数字的副作用。
<ol type="a">会显示1. 2. 3. 4.而不是a. b. c. d。
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) ".";
}
上述代码添加了对小写字母和小写罗马数字的支持。在撰写本文时，浏览器不区分类型选择器的大小写，因此您只能为备选的ol类型选择大写或小写。
- Digits
1
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>
- Ken Avila
1
听起来很简单。我会尝试安装Bootstrap 4来试一下。 - Lewis86
3
这是对dcodesmith答案的更新 https://dev59.com/H2Ei5IYBdhLWcg3wWLIS#21369918
如果文本较长 (即需要换行)，建议使用以下解决方案: 更新版Fiddle
当您使用网格系统时，您可能需要执行以下操作之一 (至少Foundation 6是如此 - 在Fiddle中无法复制):
- 将
box-sizing: content-box;添加到列表或其容器中 - 或将
text-indent:-2em;更改为-1.5em
P.S.: 我想将此作为原始答案的编辑添加，但被拒绝了。
- Thomas Landauer
0
您也可以在a、b、c周围放置<span style="font-weight:normal">，然后在CSS中将ul加粗。
示例
ul {
font-weight: bold;
}
<ul><li><span style="font-weight:normal">a</span></li></ul>
- ImInYourCloset
-1
回答有点晚，但希望有人会发现这个有用
我遇到了这样的情况：
列表项
a. 列表项
第一项是 <strong>，子元素是普通字体，而 '1.' 就是无法加粗。
我的解决方案是使用 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>
希望这能帮助到某人！
- EGC
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接