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

标签： javascripthtmlcss

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/