我可以對具有起始屬性值的有序列表進行編號嗎？

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用於此目的。

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> 

Answer 2

li標簽無權訪問父級屬性。

這是我看到的使用content: attr()的最佳方式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> 

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> 

Answer 4

這是我的垃圾解決方案。

在ol開頭加上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>