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>

如果该任务完全不可能完成，则根据孩子的数量进行样式设置并以不同的方式为上半部和后半部上色可能更为实用。仍然，如果仅通过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>

CSS：排序列表从正到负不为零？

1 个答案: