CSS：如何将有序列表从正数到负数排列，不包括零？

Question

CSS：如何将有序列表从正数到负数排列，不包括零？

4

是否可以仅使用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>

如果任务完全不可能，基于子元素数量进行样式设计并以不同颜色标记前半部分和后半部分可能更加实际。尽管如此，仅使用CSS实现这一点仍然非常有趣。

- David Montoya

那么你想做的是将列表的正负两半部分着不同的颜色吗？ - yaakov

这可能是最合理的方法。但最初的意图是创建一个像第一个代码块中所示的唯一有序列表。 - David Montoya

请查看这里。 - yaakov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itodd · Accepted Answer

很棒的问题！这是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>