css 跳过有序列表项编号

fdbelqdn 于 2022-12-15 发布在其他

关注(0)|答案(5)|浏览(152)

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

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> "start" attribute，但似乎对我没有帮助。

css

来源：https://stackoverflow.com/questions/12858130/skip-ordered-list-item-numbering

5条答案

按热度按时间

ut6juiuv1#

最简单的方法是从要跳过的项目中删除列表标记，然后使用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>

赞(0）回复(0）举报 2022-12-15

bvhaajcl2#

另一个选项是使用CSS3计数器：**一个
超文本标记语言

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

中央支助系统

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 */
}

赞(0）回复(0）举报 2022-12-15

shyt4zoc3#

我不得不同意大家对我之前的“解决方案”的批评，因为这似乎是唯一可能的伪选择器，然后无论你会使用ul或ol。

以前的内容：*

现在很简单了。
只需将以下内容添加到class .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>

导致：
1.第一列表项
第2个列表项
1.第三列表项

赞(0）回复(0）举报 2022-12-15

vnjpjtjt4#

这是我的解决方案（只在CSS中），它允许你从ol（有序列表）中保留li（列表项）的正常用法。这意味着所有li项都是一致的，没有一个项不代表与其相邻项相同的东西。
代码如下：

.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>