css - 修改列表项标记(元素符号)属性

Question

我有这个简单的 CSS 代码，我想知道是否有办法设置元素符号的文本属性(在本例中，数字元素标记:1、2、3 等)在不改变 li

内所有元素的尺寸的情况下更改为特定的尺寸和颜色

ol {
   background: #3399ff;
   padding: 20px;
   }
ol li {
     background: #cce5ff;
     color: green;
     font-size: 40px;
     }

Answer 1

你可以用 :before 伪元素和 css counter 来做到这一点.

ol {
  background: #3399ff;
  padding: 20px;
  counter-reset: ol-counter;
  list-style-type: none;
}
ol li {
  background: #cce5ff;
  color: green;
}
li::before {
  counter-increment: ol-counter;
  content: counter(ol-counter)". ";
  font-size: 40px;
  color: red;
}

<ol>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
</ol>