跳过有序列表条目编号(Skip ordered list item numbering)

我有一个有序列表，我想从一个特定的项目跳过数输出。

传统的输出：

1. List item
2. List item
3. List item
4. List item
5. List item

所需的输出：

1. List item
2. List item
   Skipped list item
3. List item
4. List item
5. List item

这是在CSS实现的？我发现了一个<ol> “启动”属性，我没有约之前认识，但似乎并没有帮助我。

Answer 1:

另一种选择是使用CSS3计数器：演示

HTML

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>

CSS

ul {
    counter-reset:yourCounter;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ".";
}
ul li.skip:before {
    content:"\a0\a0\a0"; /* some white-space... optional */
}

Answer 2:

最简单的方法是从项目中删除列表标记被跳过，并设置使用的下一个项目的数量的value属性（不会在HTML5被弃用/作废）。例：

<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>

Answer 3:

现在很简单。

只需添加下面的一类.skip与.skip被用于跳过列表项：

ol li.skip {
    list-style-type:none;
    counter-increment:none;
}

在HTML这将是：

<ol>
  <li>first list item</li>
  <li class="skip">2nd list item</li>
  <li>third list item</li>
</ol>

导致：

第一个列表项
第二个列表项
第三列表项

Answer 4:

这是我的解决方案（只用CSS），让您从醇（有序列表）保持的李（列表项）的正常使用。这意味着所有的li项是consitent并没有说不能代表同样的事情，它的邻居项。

代码下方：

  .term-and-condition li { position: relative; } .term-and-condition ol ol { list-style-type: lower-latin; } .term-and-condition h2 { position: absolute; top: -2.4em; left: -1.5em; } .term-and-condition h3 { position: absolute; top: -2.4em; left: -1.5em; } .term-and-condition h2 + *, .term-and-condition h3 + * { margin-top: 4em; }

 <html lang="en"> <head> <meta charset="UTF-8"> <title>Skip ordered list item numbering</title> </head> <body> <article class="term-and-condition"> <h1>Participants agree to be bound by these Terms and Conditions</h1> <ol> <li> <h2>The Promoter</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li> <h2>Eligibility</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li> <h2>Entry</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li> <p>Entrants must upload an image and text that:</p> <ol> <li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li> <li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li> <li><p>in amet libero magnam consectetur facere,</p></li> <li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li> <h3>Additional requirements</h3> <p>All entries must be the participant's own image or have the relevant permission</p> </li> <li><p>The entrant must be the lorem</p></li> </ol> </li> <li> <h2>Winner Selection</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p> </li> </ol> </article> </body> </html>

- 见Codepen

Answer 5:

有一件事我试过，好像工作只是增加字体大小：0。这可以适用于上述“跳过”类。

诚然，这种解决方案缺乏一些HTML纯度，但相当简单。