html - CSS:有序列表从正到负没有零？

Question

是否可以只使用 CSS 创建一个从正到负而不是零的有序列表？ 示例:

 3. Highest
 2. Higher
 1. High
-1. Low
-2. Lower
-3. Lowest

我了解该演示文稿非常不寻常。目的是用一个字段创建最喜欢和最不喜欢的列表。

一些技术背景:字段生成于Joomla! CMS通过FLEXIcontent's Text Field .该字段被配置为能够接受多个条目，并且被限制为只能接受偶数个条目。用户需要为给定字段输入相同数量的优缺点。我希望能够完全控制 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>

如果任务完全不可能，根据 child 的数量设计样式并为前半部分和后半部分涂上不同的颜色可能更实用。不过，如果仅使用 CSS 看看这是否可行将是非常有趣的。

Answer 1

好问题!这是一个有点不同的东西，也是 CSS 可以做什么的一个有趣的例子。

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

通过使用 CSS 计数器，您可以伪造列表编号，然后使用 nth-child 重置计数器以避免显示 0 项。

具有起始编号的解决方案

ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5em;
}

ol[start="1"] {
  counter-reset: ol 2;
}

ol[start="1"] li:nth-child(2) {
  counter-reset: ol 0;
}

ol[start="2"] {
  counter-reset: ol 3;
}

ol[start="2"] li:nth-child(3) {
  counter-reset: ol 0;
}

ol[start="3"] {
  counter-reset: ol 4;
}

ol[start="3"] li:nth-child(4) {
  counter-reset: ol 0;
}

ol li::before {
  counter-increment: ol -1;
  content: counter(ol) '.';
  text-align: right;
  margin: 0 .5em 0 -1.5em;
  display: inline-block;
  width: 1em;
}

<h2>Start at 1</h2>
<ol start="1">
  <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>
  <li>List item 6</li>
</ol>

<h2>Start at 2</h2>
<ol start="2">
  <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>
  <li>List item 6</li>
</ol>

<h2>Start at 3</h2>
<ol start="3">
  <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>
  <li>List item 6</li>
</ol>

无起始编号但正负列表项数相同的方案

如果你想让它工作而不必将 start 属性添加到 ol 并且总是有相同数量的正面和负面列表元素，你可以使用这个 CSS - 但它再次要求您将其写出所有所需数量的元素的选择器。

ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5em;
}

/* two items */

ol li:nth-child(1):nth-last-child(2) {
  counter-reset: ol 2;
}

ol li:nth-child(2):nth-last-child(1) {
  counter-reset: ol 0;
}

/* fouritems */

ol li:nth-child(1):nth-last-child(4) {
  counter-reset: ol 3;
}

ol li:nth-child(3):nth-last-child(2) {
  counter-reset: ol 0;
}

/* six items */

ol li:nth-child(1):nth-last-child(6) {
  counter-reset: ol 4;
}

ol li:nth-child(4):nth-last-child(3) {
  counter-reset: ol 0;
}


ol li::before {
  counter-increment: ol -1;
  content: counter(ol) '.';
  text-align: right;
  margin: 0 .5em 0 -1.5em;
  display: inline-block;
  width: 1em;
}

<h2>Two Items</h2>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

<h2>Four Items</h2>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>

<h2>Six Items</h2>
<ol>
  <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>
  <li>List item 6</li>
</ol>