带有不同项目符号和数字颜色的默认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/