javascript - 具有不同元素符号和数字颜色的默认 ol 和 li 样式

Question

我想让这个 ol 和 ul 风格和这张图片一样。我想让它默认。我不想要 li 中的任何其他标签。

谁能帮我解决这个问题。

ul li {
  color: blue;
}
ol {
  list-style: none;
  counter-reset: item;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  color: red;
}

<ul>
  <li>Item one of five</li>
  <li>Item two of five, Item two of five, Item two of five, Item two of five, Item two of five:
    <ul>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ul>
  </li>
  <li>Item three of five</li>
  <li>Item four of five, Item four of five, Item four of five, Item four of five</li>
</ul>
<ol>
  <li>Item one of five</li>
  <li>Item two of five, Item two of five, Item two of five, Item two of five, Item two of five:
    <ol>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ol>
  </li>
  <li>Item three of five</li>
  <li>fdddItem four of five, Item four of five, Item four of five, Item four of five</li>
</ol>

orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also

Answer 1

ul, ol {
  list-style: none;
}
li::before {
  font-family: serif;
  color: red;
}
ul li::before {
  content: "● ";
}
ol li {  
  counter-increment: item;
}
ol li::before {  
  content: counter(item) ". ";
}
li li {
   counter-reset: item;
}
li li::before {
  content: "⚬ ";
}

希望这个片段设置样式符合您的预期。结帐https://jsfiddle.net/moorthyrweb/u27cfzmo/