重置列表外的默认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>

如果我现在将其中一些段落的样式设置为S，那么它们的编号似乎是从第一项开始，然后依次进行：

#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是否可以访问此处隐式使用的列表计数器？我可以重置计数器吗？我在哪里能找到更多关于这个的信息？( “生成内容”部分在w3.org上并没有分享太多细节。)

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

在div上，您将使用任何类名而不是class=“容器”。我查过了，已经开始工作了。

​

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

​

Answer 3

最佳做法

​

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>

​