重置列表外的默认 CSS 列表计数器

Question

假设我有以下段落序列：

<p id="par-1">Lorem ipsum dolor sit amet,</p>
<p id="par-2">consectetur adipiscing elit.</p>
<p id="par-3">Cras est augue,</p>
<p id="par-4">luctus vitae pretium ut,</p>
<p id="par-5">scelerisque nec libero.</p>
<p id="par-6">Phasellus condimentum sollicitudin mi,</p>
<p id="par-7">vitae molestie tellus cursus vitae.</p>

如果我现在将某些段落的样式设置为 display as list-items，那么它们的编号似乎从第一项开始并按顺序继续：

#par-2,                                                                                                   
#par-4,
#par-6 {                                                                                                  
  display: list-item;                                                                                   
  list-style-position: inside;                                                                          
  list-style-type: decimal;                                                                             
}                                                                                                         

呈现为

Lorem ipsum dolor sit amet,
1. consectetur adipiscing elit.
Cras est augue,
2. luctus vitae pretium ut,
scelerisque nec libero.
3. Phasellus condimentum sollicitudin mi,
vitae molestie tellus cursus vitae.

问题

列表计数器（此处隐含使用的计数器）是否可供 CSS 访问？我可以reset that counter吗？我在哪里可以找到这方面的更多信息？ （w3.org 上的 “Generated Content” 部分没有分享太多细节。）

PS：我不是在寻找模仿所描述行为的替代实现，我在寻找细节来理解和操纵现有的。

Answer 1

有两种方法可以做到这一点（如果我明白你的意图）：

• 显示像您一样的常规列表，但使用list-type: none 隐藏一些计数器
• 或者创建一个自定义 CSS 计数器并有选择地递增它

body {
  /* Initialise the counter on any parent */
  counter-reset: section;
}

p[id^='par-'] {
  /* Increment the counter each time we encounter a p with an id that starts with "par-" */
  counter-increment: section;
}

#par-2::before,
#par-4::before,
#par-6::before {
  /* Insert the counter value before the content */
  content: counter(section) ". ";
} 

<p id="par-1">Lorem ipsum dolor sit amet,</p>
<p id="par-2">consectetur adipiscing elit.</p>
<p id="par-3">Cras est augue,</p>
<p id="par-4">luctus vitae pretium ut,</p>
<p id="par-5">scelerisque nec libero.</p>
<p id="par-6">Phasellus condimentum sollicitudin mi,</p>
<p id="par-7">vitae molestie tellus cursus vitae.</p>

Answer 2

最佳实践

ol li{list-style-position: inside;}

<div class="container"> 
<ol>
  <p>Lorem ipsum dolor sit amet,</p>                             
<li>consectetur adipiscing elit.</li>                                   
  <p>Cras est augue,</p>                                              
<li>luctus vitae pretium ut,</li>                                
  <p>scelerisque nec libero.</p>                                   
<li>Phasellus condimentum sollicitudin mi,</li>                        
  <p>vitae molestie tellus cursus vitae.</p> 
<ol>
</div>

Answer 3

在 div 上，您将使用任何类名而不是 class="container"。我已经检查过了，它正在工作。

.container p:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

.container:first-of-type {
  counter-reset: mycounter;
}

.container p:nth-child(2n+1):before {
  display: none;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet,</p>
  <p>consectetur adipiscing elit.</p>
  <p>Cras est augue,</p>
  <p>luctus vitae pretium ut,</p>
  <p>scelerisque nec libero.</p>
  <p>Phasellus condimentum sollicitudin mi,</p>
  <p>vitae molestie tellus cursus vitae.</p>
</div>