除了它们的内容之外，如何给 <li> 计数器着色？

Question

我希望能够将整行（包括数字）设置为单个元素。

我试过“list-style-position: inside”，但是让文本出现在数字下方，所以它不起作用。

有没有办法达到预期的效果？

这是描述问题的代码片段。我希望数字保留在红色框中并保持与当前行对齐：

ol { 
  margin-left: 20px;
  padding: 0;
  background-color: red;
}

<ol>
    <li> Text
    <li> Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very Long Text
    <li> Text
</ol>

Answer 1

您可以使用 :nth-of-type select 或 select 特定行，即：

li:nth-of-type(2) { 
    color: blue; 
}

要设置数字的样式，您必须设置 list-style: none，然后使用 CSS 属性 counter-reset 和 counter-increment 设置数字（使用关联名称）并增加该数字，允许您根据需要设置样式：

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

li:nth-of-type(2) { 
  color: blue; 
}

li::before {
  content: counter(my-counter) ". ";
  counter-increment: my-counter;
}

li:nth-of-type(2)::before {
  color: red;
  font-weight: bold;
}

<ol>
  <li>Hey</li>
  <li>Test</li>
  <li>Numbers</li>
</ol>

除了它们的内容之外，如何给 <li> 计数器着色？

How to color the <li> counters in addition to their contents?

html

css

html-lists