如何在HTML的OL LI中加粗编号与列表项且不影响子列表？

要实现有序列表自动生成的编号加粗，你可以使用CSS的::marker伪元素来控制列表标记的样式，这是目前最直接的解决方案。

修改步骤： #

• 若希望所有层级的有序列表编号都加粗，在原有CSS代码中添加以下规则即可：

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

• 若需要对不同层级或类型的列表编号做差异化设置，可以使用更精准的选择器，比如：

/* 外层一级有序列表编号加粗 */
ol > li::marker {
  font-weight: bold;
}
/* 二级大写字母类型有序列表编号加粗 */
ol ol[type="A"] > li::marker {
  font-weight: bold;
}
/* 二级小写字母类型有序列表编号加粗 */
ol ol[type="a"] > li::marker {
  font-weight: bold;
}
/* 三级罗马数字类型有序列表编号加粗 */
ol ol ol[type="i"] > li::marker {
  font-weight: bold;
}

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }

    /* 所有有序列表编号加粗 */
    ol ::marker {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

这样修改后，所有有序列表的自动生成编号都会变为粗体，和你设置的列表项标题粗体效果一致，实现和示例图匹配的样式。

内容的提问来源于stack exchange，提问作者Taniafau Guswanto