html - Css 计数器输出标记和伪元素之前的差异

Question

我正在经历这个link要了解有关计数器的更多信息以及嵌套计数器的工作原理，

我有如下的 css 和 html

<style>
   ol {
      counter-reset: my-counter 0;
      list-style-type: none;
   }
   li::before {
     content: counters(my-counter, '.'); 
     counter-increment: my-counter;
   }
</style>

用html作为

<ol>
  <li> First
     <ol>
        <li> Eleven </li>
        <li> Twelve </li>
     </ol>
  </li>
  <li> Second
    <ol>
       <li> Twenty-one </li>
       <li> Twenty-two </li>
    </ol>
  </li>
</ol>

在这里，我得到了预期的内容，例如 1 和 1.1，但是将 before 更改为 marker 伪元素，即 li::marker 给出类似 0 和 0.0 的值。

虽然当我只使用这个 css 时，输出符合预期

   li::marker {content: counters(list-item, '.') ' ';}

我不明白为什么 before 和 marker 伪元素为此列表生成不同的输出。

Answer 1

此问题与 ::marker 中允许的属性有关。 content 是允许的，但不是 counter-increment 所以它可以工作但不会增加计数器。

如果您将增量移动到 li 它会起作用:

ol {
  counter-reset: my-counter 0;
  list-style-type: none;
}

li::marker {
  content: counters(my-counter, '.');
}

li {
  counter-increment: my-counter;
}

<ol>
  <li> First
    <ol>
      <li> Eleven </li>
      <li> Twelve </li>
    </ol>
  </li>
  <li> Second
    <ol>
      <li> Twenty-one </li>
      <li> Twenty-two </li>
    </ol>
  </li>
</ol>

有关允许属性的更多详细信息，请参阅规范:https://www.w3.org/TR/css-lists-3/#marker-properties