Html 使 ABC 有序列表项具有粗体样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/862878/
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
Make ABC Ordered List Items Have Bold Style
提问by Yaakov Ellis
I have an html Ordered list with type set to "A"
我有一个类型设置为“A”的 html 有序列表
<ol type="A">...</ol>
Thus, each list item will start with A, B, C, etc.
因此，每个列表项将以 A、B、C 等开头。
I would like to style the A, B, C letters to be bold. I have tried setting font-weight:bold; via css, but it didn't work. Any suggestions on how to do this?
我想将 A、B、C 字母设置为粗体。我试过设置 font-weight:bold; 通过 css，但它没有用。关于如何做到这一点的任何建议？
回答by peirix
a bit of a cheat, but it works:
有点作弊，但它有效：
HTML:
HTML：
<ol type="A" style="font-weight: bold;">
<li><span>Text</span></li>
<li><span>More text</span></li>
</ol>
CSS:
CSS：
li span { font-weight: normal; }
回答by Speed
As an alternative and superior solution, you could use a custom counter in a before element. It involves no extra HTML markup. A CSS reset should be used alongside it, or at least styling removed from the olelement (list-style-type: none, reset margin), otherwise the element will have two counters.
作为替代和高级解决方案，您可以在 before 元素中使用自定义计数器。它不涉及额外的 HTML 标记。应该在它旁边使用 CSS 重置，或者至少从ol元素 ( list-style-type: none, reset margin) 中删除样式，否则元素将有两个计数器。
<ol>
<li>First line</li>
<li>Second line</li>
</ol>
CSS:
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;
}
An example: http://jsfiddle.net/xpAMU/1/
一个例子：http: //jsfiddle.net/xpAMU/1/
回答by Alex Rozanski
Are you sure you correctly applied the styles, or that there isn't another stylesheet interfering with your lists? I tried this:
您确定您正确应用了样式，或者没有其他样式表干扰您的列表？我试过这个：
<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>
Then in the stylesheet:
然后在样式表中：
ol {font-weight: bold;}
ol li span.label {font-weight:normal;}
And it bolded the A, B, Cetc and not the text.
它加粗了A，B，C等，而不是文字。
(Tested it in Opera 9.6, FF 3, Safari 3.2 and IE 7)
（在 Opera 9.6、FF 3、Safari 3.2 和 IE 7 中测试过）
回答by BoomShadow
I know this question is a little old, but it still comes up first in a lot of Google searches. I wanted to add in a solution that doesn't involve editing the style sheet (in my case, I didn't have access):
我知道这个问题有点老，但它仍然出现在很多谷歌搜索中。我想添加一个不涉及编辑样式表的解决方案（在我的情况下，我没有访问权限）：
<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>回答by Pierre Chavaroche
You could do something like this also:
你也可以做这样的事情：
ol {
font-weight: bold;
}
ol > li > * {
font-weight: normal;
}
So you have no "style" attributes in your HTML
所以你的 HTML 中没有“样式”属性
回答by syed yasser ahmed
You could do something like this also:
你也可以做这样的事情：
<ol type="A" style="font-weight: bold;">
<ol type="A" style="font-weight: bold;">
<li style="padding-bottom: 8px;">****</li>
It is simple code for the beginners.
这是初学者的简单代码。
This code is been tested in "Mozilla, chrome and edge..
此代码已在“Mozilla、chrome 和 edge..
