Question

我正在尝试计算不是常规列表的元素。

更容易在代码中解释： Fiddle

我或多或少无法控制html。

相反，DOM看起来像这样：

 <div class="body">
  <div><p class="numlist" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>
  <!-- Only here for only here in demonstrative purpose -->
  <div class="should-reset"><p>Start a new counter for the inlines</p></div>
  <div><p class="numlist depth">first text</p></div>
  <div><p class="numlist depth">second text</p></div>
  <div><p class="numlist depth">third text</p></div>
  <!-- Only here for only here in demonstrative purpose -->
  <div class="should-reset"><p>Want to reset the standard counter</p></div>
  <div><p class="numlist reset" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>      
</div>

我想要的结果是这样的：

1. list one
2. list one
3. list one
     1. list two
     2. list two
     3. list two
1. list three
2. list three
3. list three

但是列表3总是像这样，计数器永远不会重置：

1. list three
4. list three
5. list three

Answer 1

为什么不简单地使用<ol>代码？

备注/补充：在我发布答案后，此要求已添加到问题中：＆＃34;我或多或少无法控制html。＆＃34;

＆＃13;

.inset {
  margin-left: 20px;
}

＆＃13;

<ol>
  <li>
    first text
  </li>
  <li>
    second text
  </li>
  <li>
    third text
  </li>
  </ol>

  <ol class="inset">
    <li>
      first text
    </li>
    <li>
      second text
    </li>
    <li>
      third text
    </li>
  </ol>
  
  <ol>
    <li>
      first text
    </li>
    <li>
      second text
    </li>
    <li>
      third text
    </li>
  </ol>

＆＃13;

Answer 2

＆＃13;

.body {
  counter-reset: standard;  
}

.should-reset {
  counter-reset: standard;
  color: red;
}

.numlist::before {
  counter-increment: standard;
  content: counter(standard) ". ";
}

.numlist.depth::before {
  margin-left: 50px;
}

＆＃13;

<div class="body">
  <div><p class="numlist" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>
  <div class="should-reset"><p>Start a new counter for the inlines</p> </div>
  <div><p class="numlist depth" depth>first text</p></div>
  <div><p class="numlist depth" depth>second text</p></div>
  <div><p class="numlist depth" depth>third text</p></div>
  <div class="should-reset"><p>Want to reset the standard counter</p> </div>
  <div><p class="numlist" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>
</div>

＆＃13;

UPD：

＆＃13;

.body {
  counter-reset: standard;  
}

.body div:nth-child(3n + 1) {
  counter-reset: standard;
}

.numlist::before {
  counter-increment: standard;
  content: counter(standard) ". ";
}

.numlist.depth::before {
  margin-left: 50px;
}

＆＃13;

<div class="body">
  <div><p class="numlist reset" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>
  <div><p class="numlist depth" depth>first text</p></div>
  <div><p class="numlist depth" depth>second text</p></div>
  <div><p class="numlist depth" depth>third text</p></div>
  <div><p class="numlist" >first text</p></div>
  <div><p class="numlist">second text</p></div>
  <div><p class="numlist">third text</p></div>
</div>

＆＃13;

Answer 3

您在<div><p class="numlist reset" >first text</p></div>处进行的计数器重置不会重置原始计数器，因为在元素上发生的计数器重置仅适用于在该元素及其同级级别定义的计数器。无需重置原始计数器，而是创建一个具有相同名称的 new 计数器，该计数器的作用域仅限于P元素（以及以后存在的任何同级或子级）。

这可以通过替换为您写过"counters(standard," AND ")的{{1}}来完成：

counter(standard)

.body {
  counter-reset: standard inline;  
}

div > p.numlist::before {
  counter-increment: standard;
  content: counters(standard," AND ") ". ";
}

div > p.numlist.depth::before {
  counter-increment: inline;
  content: counter(inline) ". ";
  margin-left: 50px;
}

.should-reset {
  color: red;
}

div > p.numlist.reset {
  counter-reset: standard;
}

尽管如上所见，<div class="body"> <div> <p class="numlist" >first text</p> </div> <div> <p class="numlist">second text</p> </div> <div> <p class="numlist">third text</p> </div>  <div class="should-reset"> <p> Start a new counter for the inlines </p> </div> <div> <p class="numlist depth" depth>first text</p> </div> <div> <p class="numlist depth" depth>second text</p> </div> <div> <p class="numlist depth" depth>third text</p> </div>  <div class="should-reset"> <p> Want to reset the standard counter </p> </div> <div> <p class="numlist reset" >first text</p> </div> <div> <p class="numlist">second text</p> </div> <div> <p class="numlist">third text</p> </div> </div>函数显示了从当前作用域可见的给定名称的所有当前计数器，而不仅仅是该名称的最本地定义的计数器，{ {1}}可以到达并重置更高范围的实例。

这不是浏览器错误（与问题下方评论中的推测相反）。来自https://drafts.csswg.org/css-lists-3/#nested-counters：

计数器是“自我嵌套”的；在从其父级继承了同名计数器的元素上实例化一个新计数器会创建一个嵌套在现有计数器内部的同名新计数器。这对于HTML中的列表之类的情况很重要，在这种情况下，列表可以嵌套在列表中任意深度：不可能为每个级别定义唯一命名的计数器。 counter（）函数仅检索元素上给定名称的最里面的计数器，而counters（）函数使用包含元素的给定名称的所有计数器。

因此，计数器的范围从实例化该计数器的文档的第一个元素开始，并包括该元素的后代及其后代及其后代。但是，它不包含计数器范围内的任何元素，这些元素具有在元素的后续同级上由计数器重置创建的相同名称，从而允许此类显式的计数器实例遮盖那些较早的同级。

如果您无法更新HTML，并且counters()元素仅用于提供信息，则不能仅使用CSS来完成此操作。它将需要类似:has()伪类的内容，因此，不是您的

counter-reset

这将需要

<div class="should-reset">

但是，据我所知，W3C CSS工作组还没有立即提出将div > p.numlist.reset { counter-reset: standard; }伪类添加到“ live”选择器配置文件的建议，我怀疑这样做会不会请尽快完成，因为这可能会明显降低性能。（Selectors Level 4草案仅在“快照”配置文件中包含div:has(> p.numlist.reset) { counter-reset: standard; }，适用于:has()之类的JS方法，目前适用于no major browser even supports it for that, yet。）

请注意，即使在has():的情况下（只有在实时配置文件中采用querySelector()的情况下，它也才有效），仍然会创建一个名为“ standard”的嵌套计数器，而不是重置您创建的那个

div:has(> p.numlist.reset) {counter-reset: standard;}

当有一个类时，Css计数元素和重置计数器

3 个答案: