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计数器并有选择地增加它

＆＃13;

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) ". ";
}

＆＃13;

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

＆＃13;

Answer 2

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

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>

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

3 个答案: