Html CSS：从正到负的有序列表，没有零？

是否可以仅使用CSS创建一个从正到负且不为零的有序列表？ 例如：

我知道这次演讲很不寻常。其目的是使用一个字段创建最喜爱和最不喜爱的列表

一些技术背景：该字段是在via中生成的。该字段被配置为能够获取多个条目，并且被限制为只能获取偶数个条目。用户需要为给定字段输入相同数量的赞成和反对意见。我希望能够完全控制CSS中的所有内容，所以如果可能的话，我不必创建模板覆盖

我选择这种方法是因为我不希望一个集合需要多个字段

我找到了各种各样的资源来设计数字的样式。我相信以下内容不起作用，因为我必须用PHP控制某些因素，或者标记有限制：

<ol>
    <li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>

<ol reversed> <!--Stays positive and ends at 1-->
    <li>Reversed List</li> 
</ol>

<ol reversed start=2> <!--Can I control where to start based on number of children?-->
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ol>

列表项
反向列表
清单项目1
清单项目2
清单项目3
清单项目4
清单项目5

---

如果这项任务完全不可能完成，那么根据孩子的数量来设计样式，并将上半部分和下半部分涂上不同的颜色，可能更为实际。不过，看看这是否只适用于CSS还是很有趣的。

好问题！这是一个有点不同的CSS可以做什么有趣的例子

有关问题的解决方案，请参阅下面的代码。如果您使用的是SASS，那么您可以轻松创建一个mixin来生成所需的所有选择器

通过使用CSS计数器，您可以伪造列表编号，然后使用

nth child

重置计数器，以避免显示

0

项

具有起始编号的解决方案

ol{
列表样式：无；
保证金：0；
填充：01.5em；
}
ol[start=“1”]{
计数器复位：ol 2；
}
ol[start=“1”]li:n个孩子（2）{
计数器复位：ol 0；
}
ol[start=“2”]{
计数器复位：ol 3；
}
ol[start=“2”]li:n第n个孩子（3）{
计数器复位：ol 0；
}
ol[start=“3”]{
计数器复位：ol 4；
}
ol[start=“3”]li:n第n个孩子（4）{
计数器复位：ol 0；
}
奥利：以前{
计数器增量：ol-1；
内容：计数器（ol）'；
文本对齐：右对齐；
保证金：0.5em 0-1.5em；
显示：内联块；
宽度：1米；
}

从1开始
清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6
2点开始
清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6
3点开始
清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6

因此，您要做的是将列表的正反两面涂上不同的颜色？这可能是最合理的方法。但最初的目的是创建一个独特的有序列表，如第一个代码块所示！但是，我认为start=“#”对于数量不确定的条目来说需要PHP，对吗？如果是这样的话，我想我可以硬设置所需的条目数。如果起始编号没有限制，那么使用PHP将更有意义，因为您不想编写可能1000个选择器。但是，如果您知道最大的数字，您可以创建更多选择器，直到该数字-使用SASS或更少的mixin自动生成所有选择器，或者手动复制、粘贴和更改数字。我已经更新了我的答案，因为我相信您对开始不感兴趣，并且总是希望列表包含相同数量的正数和负数

<ol>
    <li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>

<ol reversed> <!--Stays positive and ends at 1-->
    <li>Reversed List</li> 
</ol>

<ol reversed start=2> <!--Can I control where to start based on number of children?-->
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ol>