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

Question

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

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

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

一些技术背景： 该字段是在Joomla 中生成的！CMS通过FLEXIcontent 的 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>

如果任务完全不可能，根据孩子的数量来设计样式并为前半部分和后半部分着色可能更实用。不过，看看这是否可以完全使用 CSS 是非常有趣的。

标签： htmlcsshtml-lists

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>