"Halt"有序列表编号

Question

我受到了另一个主题的这个答案的启发，并试图在我自己的情况下使用它，以摆脱在页面中手动插入某些start=x到某些ol的情况，但我的情况远比那个复杂，所以我无法使它按我想要的方式工作。。。

所以我有一些ol，每个都跟在一个h3标签后面。现在，困难的部分是，可能有一些li不应该得到排序，最重要的是，可能存在一些内部只有一个li的ol，其中单个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) ". "; }

基本上，这个想法是只有当前一个li不具有类no-style时才使用counter-incrementmycounter，并且当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等(等属性。示例如下：

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;即可。

对于父元素中唯一的元素，可以使用伪类：only child。

Answer 2

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

要放入我们自己的"标记"，我们必须去掉所有的标准标记，而是自己为它们留出空间，正如这个片段所做的那样，在每个列表项上设置一个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宽度。如果你有数百件商品，你可能会想为柜台节省更多空间。