Question

是否有任何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常规。

我知道解决方法......

Answer 1

<强> Counter-increment

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

Answer 2

大约一年后，但是对于未来来到这里的其他人来说这可能也很有趣：

另一种简单的可能性是将列表项内容包装为，将<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>以及[{1}}以外的后代，您可能希望使用代替li > * }：

li > p

（在这里检查列表项目4是ol / li / code而不是ol / li / p / code。如果您只想将块级后代设置为常规格式，请确保使用选择器<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> List Item 1 </li> <li> Liste Item 2 <ol> <li> Sub List Item 1 </li> <li> Sub List Item 2 </li> </ol> </li> <li> List Item 3. </li> <li> <code>List Item 4.</code> </li> </ol> </body> </html>而不是li > *，但也不要使用像“foo li *粗体字{{1}这样的内联} foo。“

Answer 3

JSFiddle:

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

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

Answer 4

我在撰写简报时遇到了类似的问题。所以我不得不用这种方式内联样式：

<!DOCTYPE html>
<html>



<body>
  <h1>Hello Plunker!</h1>
  <button onclick="Add()">Add TextBox</button>

  <div id="Wrapper">
    <div id="div1">
      <p>This is Div one</p>
    </div>

    <div id="div2">
      <p>This is Div two</p>
    </div>

    <div id="div3">
      <p>This is Div threee</p>
    </div>

    <div id="div4">
      <p>This is Div Four</p>
    </div>

    <div id="ClearFix"></div>
  </div>

</body>

</html>

Answer 5

这是dcodesmith的回答https://stackoverflow.com/a/21369918/1668200

的更新

建议的解决方案也适用于文本较长时（即行需要换行）： Updated Fiddle

当您使用网格系统时，您可能需要执行以下操作之一（至少对于Foundation 6来说是这样 - 无法在小提琴中重现它）：

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

P.S。：我想将此作为原始答案的编辑添加，但它被拒绝了。

Answer 6

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

Answer 7

新的::marker伪元素选择器已添加到CSS Pseudo-Elements Level 4，这使加粗样式列表项编号的样式变得如此简单

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

很遗憾，当前只有supported by Firefox 68 and up。（有关Chrome /闪烁状态，请参见Chrome Bug 457718。）

Answer 8

上一个答案有一个副作用，使所有类型的列表变成数字。 <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类型选择大写或小写。

Answer 9

我知道这很老了，但是还有一种“快速而肮脏”的方式根本不使用<li>：

<!-- <ul> is used for indentation only -->
<ul>
    <p> <b>1.</b> item text </p>
    <p> <b>2.</b> item text </p>
</ul>

Answer 10

答案太晚了，但希望有人会觉得有用

我有这样的情况：

列表项

a。列表项

在第一项是的情况下，子元素是正常重量，并且为“ 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>

希望这对某人有帮助！

Answer 11

您还可以将a，b，c放到一边，然后在css中加粗ul。

示例

ul {
font-weight:bold;
}

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

有没有办法让有序列表中的数字加粗？

11 个答案: