有没有一种方法可以使有序列表中的数字加粗？

Question 1

是否有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保持规则。

我知道解决方法...

Question 2

反增量

的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) ".";
}

演示

Question 3

另一个简单的可能性是将列表项内容包装为，将样式设置<li>为粗体和正常。从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>s而不是后代的s等其他场景，则可能要使用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。）

如果您只想将块级后代的样式设置为常规样式，而不要像“ foo粗体字”这样的内联样式，请确保使用选择器，li > *而不要使用选择器li * foo”。

Question 4

JSFiddle：

ol {
    counter-reset: item;
}
ol li { display: block }

ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}

Question 5

撰写新闻时，我遇到了类似的问题。因此，我必须以这种方式内联样式：

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

Question 6

一个新的::marker伪元素选择器已添加到CSS Pseudo-Elements Level 4中，使用粗体显示列表项编号的样式简单到

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

不幸的是，它目前仅受Firefox 68及更高版本支持。（有关Chrome /闪烁状态，请参阅Chrome错误457718。）

Question 7

这是dcodesmith答案的更新 https://stackoverflow.com/a/21369918/1668200

当文本较长时（即需要换行），建议的解决方案也可以使用：更新了Fiddle

使用网格系统时，您可能需要执行以下一项操作（至少对于Foundation 6来说是正确的-无法在Fiddle中重现它）：

添加box-sizing:content-box;到列表或其容器
或更改text-indent:-2em;为-1.5em

PS：我想将此添加为原始答案的编辑，但被拒绝了。

Question 8

如果您使用的是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>

Question 9

回答来自dcodesmith的https://stackoverflow.com/a/21369918/2526049具有副作用，该副作用使所有类型的列表变为数字。 <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) ".";
}

上面的代码增加了对小写字母，小写罗马数字的支持。在撰写本文时，浏览器无法区分类型的大写和小写选择器，因此我只能为替代的ol类型选择大写或小写。

Question 10

您还可以将放在a，b，c周围，然后在CSS中加粗ul。

例

ul {
    font-weight: bold;
}

<ul><li><span style="font-weight:normal">a</span></li></ul>

Question 11

答案很晚，但希望有人会发现这个有用

我有这样的情况：

项目清单

一种。项目清单

第一项是，子元素是正常重量，而'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>

希望这可以帮助某人！