有start属性值的有序列表如何进行编号样式设置？

Question

这里是问题:

我有一个带有start属性的ol li有序列表，如下所示:

    .custom {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .custom li {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }
    
    .custom li::before {
      content: counter(step-counter);
      margin-right: 5px;
      font-size: 80%;
      background-color: rgb(0,200,200);
      color: white;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
    }

    <ol start="6" class="custom">
      <li>This is the sixth item</li>
      <li>This is the seventh item</li>
      <li>This is the eighth item</li>
      <li>This is the ninth item</li>
      <li>This is the tenth item</li>
    </ol>

我在浏览器上获得以下输出：

能否使用start属性中的值而不是1来序列化有序列表中的list-style编号？但不能使用JavaScript。

- Marvin Danig

Answer 1

您可以使用CSS变量来模拟此过程，代替start，并将其用于重置计数器。出于语义目的，您还可以保留start属性。

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: step-counter calc(var(--start) - 1);
}

.custom li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0, 200, 200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

<ol style="--start:6" start="6" class="custom">
  <li>This is the sixth item</li>
  <li>This is the seventh item</li>
  <li>This is the eighth item</li>
  <li>This is the ninth item</li>
  <li>This is the tenth item</li>
</ol>

- Temani Afif

---

使用CSS变量很有趣，但它确实会影响语义。例如，在屏幕阅读器上，“style = --start:6”而不是“start = 6”会如何显示？ - Marvin Danig

很棒。这个解决方案现在已经在生产中使用，从第43页开始应用于这本书：https://bubblin.io/book/meditations-by-marcus-aurelius/43 谢谢@temani-afif :-) - Marvin Danig

Answer 2

标签无法访问父元素属性。

这是我见过的最好的方法，使用 content: attr()。

    .custom {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .custom li {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }
    
    .custom li::before {
      content: attr(data-idx);
      margin-right: 5px;
      font-size: 80%;
      background-color: rgb(0,200,200);
      color: white;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
    }

    <ol class="custom">
      <li data-idx="6">This is the sixth item</li>
      <li data-idx="7">This is the seventh item</li>
      <li data-idx="8">This is the eighth item</li>
      <li data-idx="9">This is the ninth item</li>
      <li data-idx="10">This is the tenth item</li>
    </ol>

- Arthur

Answer 3

我已经在你的CSS中添加了一些规则。其中最重要的是这个：

.custom{counter-reset:start 5;} 

这将使列表从 5+1 = 6 开始。

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset:start 5;/*This*/
}

.custom li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  counter-increment: start;/*This*/
}

.custom li::before {
  content:counter(start);/*This*/
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

<ol class="custom">
  <li>This is the sixth item</li>
  <li>This is the seventh item</li>
  <li>This is the eighth item</li>
  <li>This is the ninth item</li>
  <li>This is the tenth item</li>
</ol>

- enxaneta

---

这会使得每个列表都从6开始，而不是从HTML中解释“start”值。 - Tyler James Young

没错，那只是把问题转移了，而不是让它与所谓的所见即所得编辑器等工具兼容。 - Fredy31

Answer 4

这是我的临时解决方案。

在有序列表的开头用JS添加x个li，然后通过将它们绝对定位并抛到天上来隐藏它们。

$('ol[start]').each(function(){
    var start = $(this).attr('start');
    //console.log(start);
    for(var i=1;i<start;i++){
        $(this).prepend('<li class="hidden"></li>');
    }
})

    
ol{
  counter-reset: items;
  padding:0;
  padding-left: 46px;
}
ol  li {
  display: block;
  counter-increment: items;
  text-indent: -22px;
  margin-bottom: 25px;
}

ol li.hidden{
  visibility:hidden;
  position:absolute;
  left:-999vw;
}

ol li:before {
    content: "0" counter(items)". ";
    color:green;
    display:inline-block;
    width:22px;
    font-size:14px;
}

ol li:nth-child(n+10):before {
    content: "" counter(items)". ";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol start="4">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ol>

- Fredy31