"Halt" 有序列表编号

Question

我从另一个主题的 this 答案中得到启发，并尝试在我自己的情况下使用它，以便摆脱必须在某些 ol 中手动插入一些 start=x在一个页面中，但我的情况比那个复杂得多，所以我不能让它完全按照我想要的方式工作...

所以我有一些 ol，每个都在一个 h3 标签之后。现在，困难的部分是可能有一些 li 不应该得到排序，除此之外，可能存在一些 ol 只有一个 li 在里面，那个单曲 li 也不应该得到排序...

就像：

<h3>Some title</h3>
<ol>
    <li>One item</li>
    <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
    <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
    <li>Another list's first item</li>
    <li>Another list's second item</li>
    <li>Another list's third item</li>
</ol>
<h3>And yet another title</h3>
<ol>
   <li>A single item here that shouldn't get ordered</li>
</ol>

所以上面的代码应该产生以下结果：

Some title
  1. One item
     Second item that shouldn't get ordered and shouldn't increment the next item either
  2. Third item, ordered with number 2
Some other title
  1. Another list's first item
  2. Another list's second item
  3. Another list's third item
And yet another title
     A single item here that shouldn't get ordered

所以我尝试了以下 CSS 的许多变体，但没有任何效果：

li:only-of-type, li.no-style { list-style-type: none; }
h3 + ol { counter-reset: mycounter; }
h3 + ol > li:not(.no-style) + li:before, h3 + ol > li:first-of-type:not(.no-style):before { counter-increment: mycounter; } 
h3 + ol > li:not(.no-style):before { content: counter(mycounter) ". "; }

基本上，想法是 counter-increment mycounter 仅当前一个 li 没有 class no-style，并且，使当 li 是 only-of-type...

时，整个编号消失

我希望，一旦我睡了一觉，因为在我的时区已经太晚了，我已经筋疲力尽了，我就能让它工作，除非 CSS 的专家得到先找到正确的语法，可以帮到我一点点。

提前感谢我收到的任何可能的帮助。

Answer 1

如果我对您的理解是正确的，那么下面的这些示例也许能以某种方式帮助您。您可以根据需要完全组合这两种解决方案。

示例 #1。 默认情况下，列表有 display: list-item; 要简单地禁用中间元素，分配它 display: block; （或任何其他）就足够了，如示例所示：

h3 + ol > li:only-child,
.no-style {
  display: block;
}

<h3>Some title</h3>
<ol>
  <li>One item</li>
  <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
  <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
  <li>Another list's first item</li>
  <li>Another list's second item</li>
  <li>Another list's third item</li>
</ol>
<h3>And yet another title</h3>
<ol>
  <li>A single item here that shouldn't get ordered</li>
</ol>

示例 #2。 如果您需要完全控制计数器，则必须使用诸如 (counter-increment、counter-reset、 ETC。）。示例如下：

li:only-of-type,
li.no-style {
  list-style-type: none;
}

h3 + ol {
  list-style: none;
  counter-reset: mycounter;
}

h3 + ol > li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

h3 + ol > li:only-child:before,
.no-style:before {
  counter-increment: none !important;
  content: "0. " !important; /* hold the indent */
  list-style-type: none;
  visibility: hidden;
}

<h3>Some title</h3>
<ol>
  <li>One item</li>
  <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
  <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
  <li>Another list's first item</li>
  <li>Another list's second item</li>
  <li>Another list's third item</li>
</ol>
<h3>And yet another title</h3>
<ol>
  <li>A single item here that shouldn't get ordered</li>
</ol>

要取消特定选择器中的增量，使用counter-increment: none;就足够了。

对于父元素中唯一的元素，可以使用伪class :only-child.

Answer 2

您只能在那些要显示计数器的项目上增加计数器。

要放入我们自己的 'marker'，我们必须摆脱所有标准标记，取而代之的是允许它们自己使用 space，此代码段通过将宽度设置为 before 伪元素来实现每个列表项。

/* we start a new counter for every ol */

h3+ol {
  counter-reset: mycounter;
}


/* don't show the standard marker */

h3+ol li {
  list-style-type: none;
  position: relative;
}


/* Now we increment the counter on every li except if it's the only one  or is in the no-style class */


/* and we show the counter on every li */

h3+ol li:not(:only-of-type):not(.no-style)::before {
  content: counter(mycounter) ". ";
  counter-increment: mycounter;
}

h3+ol li::before {
  content: '';
  position: relative;
  top: 0;
  width: 2em;
  margin-right: 0.5em;
  display: inline-flex;
  justify-content: right;
}

<h3>Some title</h3>
<ol>
  <li>One item</li>
  <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
  <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
  <li>Another list's first item</li>
  <li>Another list's second item</li>
  <li>Another list's third item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
<h3>And yet another title</h3>
<ol>
  <li>A single item here that shouldn't get ordered</li>
</ol>

注意：您可能希望为计数器节省的金额可能取决于它将变得有多大。此代码段允许几个 em 宽度。如果您有数百件商品，您可能希望为柜台节省更多 space。

"Halt" 有序列表编号

"Halt" ordered list numbering

css

html-lists