html - 有序列表编号和内容的不同样式

Question

是否可以让有序列表的数字（或字母或数字等）具有与内容不同的样式，而每个列表元素内没有某种 div 或 span 标签？

Answer 1

可以将列表样式设置为“无”并用 CSS 计数器和伪元素替换默认编号。示例：http: //jsbin.com/agagoc/1/edit

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

li {
  counter-increment: my-awesome-counter;
}

li:before {
  content: counter(my-awesome-counter);
  /* any style for numbers, as if they were spans before the content of LIs, goes here */
}

Answer 2

是的，你可以这样：

li {
  list-style: none;
  counter-increment: myCounter;
}
li:before {
    content: counter(myCounter);
    font-size: 19px;
    color: red;
}