为什么我的 标签会被 CSS 计数器忽略？答案

【问题标题】：Why are my tags ignored by CSS counters?为什么我的 标签会被 CSS 计数器忽略？
【发布时间】：2016-01-05 09:15:08
【问题描述】：

在下面的代码中，看起来所有  标签都被 CSS 计数器忽略了。这是什么原因？

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      counter-reset: ele;
    }
    *::after {
      counter-increment: ele;
      content: "element count " counter(ele);
    }
  </style>
</head>

<body>

  <h1> h1 </h1>
  <h2> h2 </h2>
  <h2> h2 </h2>
  <h2> h2 </h2>

  <p><b> b </b> p</p>

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

</body>

</html>

另外，元素 7 和 8 代表什么？

【问题讨论】：

MDN Using CSS Counters 可能有用

标签： html css css-counter

【解决方案1】：

问题说明

看起来所有的  标签都被 CSS 计数器忽略了。原因是什么？

  标签，就像其他“空”元素一样，do support counters，但不幸的是，它们是don't have an ::after pseudo-element。就像<input> 元素一样，你不能利用这个技巧通过 CSS 生成内容。由于递增计数器发生在您的 sn-p 中的这个 ::after 伪元素中，因此   元素的计数器不会递增，因为 br::after 根本不存在。

在上面的sn-p中，元素7和8分别代表什么？”

BODY 和 HTML 标签。由于您使用::after，因此计数器会递增，并且内容会插入到这些元素的末尾，位于其他页面内容之后。

半修正：计算元素而不是伪元素

您可以稍微更改 CSS 以增加元素本身的计数器，并且只显示伪元素中的值。

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      counter-reset: ele;
    }
    * {
      counter-increment: ele;
    }
    *::after {
      content: "element count " counter(ele);
    }
  </style>
</head>

<body>

  <h1> h1 </h1>
  <h2> h2 </h2>
  <h2> h2 </h2>
  <h2> h2 </h2>

  <p><b> b </b> p</p>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

</body>

</html>

上面的例子还不能很好地工作，因为它在上升一个级别时不会增加计数器。这是因为当元素打开时计数器已经增加，关闭 HTML 和 BODY 不再增加计数器。

解决方法：计算伪元素和空元素

更好地修复它的可能方法：毕竟增加::after 中的计数器，但添加一个额外的CSS 来增加没有::after 伪元素的元素的计数器：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      counter-reset: ele;
    }
    
    /* Increment the counter in the '::after' of non-empty elements. */
    *::after,
    /* And in the element itself for empty element. 
       List taken from https://developer.mozilla.org/en-US/docs/Glossary/Empty_element */
    link,track,param,area,command,col,base,meta,hr,source,img,keygen,br,wbr,colgroup,input
    {
      counter-increment: ele;
    }
    
    *::after {
      content: "element count " counter(ele);
    }
  </style>
</head>

<body>

  <h1> h1 </h1>
  <h2> h2 </h2>
  <h2> h2 </h2>
  <h2> h2 </h2>

  <p><b> b </b> p</p>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

</body>

</html>

也许它并不适合所有场景，但无论如何你的问题似乎更具学术性。无论如何，我希望这个解释至少可以帮助您理解为什么在您的 sn-p 中那些   元素似乎根本没有计数器。

【讨论】：

抱歉吹毛求疵，但*:not(br)::after, br {counter-increment: ele;...} 也可以：)
@harry，是的，它会，但它不会增加任何价值。由于 br 已经没有 ::after 伪元素，你可以将其写为 *::after, br {counter-increment: ele;...}，这基本上是我在第二个 sn-p 中所做的（也包括其他空元素，而不仅仅是 br） .您会注意到，我没有列出所有元素，只列出了空元素。
br 没有 after - 这是正确的，但是如果您尝试 *::after, br{}，您会看到 br 元素的值增加了两次。 UA 似乎增加了 thinking 的价值。是的，你确实包含了所有自结束标签，我只是说这会更短）
@student：当您使用选择器*::after, br{} 递增计数器时，UA 会为每个br 元素将计数器递增两次。这似乎表明 UA 为 br 选择器增加一次，为br::after 增加一次，即使 GolezTrol 所说的 br 是自关闭的并且没有 br::after 是真的。
@GolezTrol：其实很抱歉，我的样本不会更短（实际上它会更长，因为我们必须将所有样本都包含在:not 中）。有趣的是*::after, br {counter-increment: ele;} *::after {content: "element count " counter(ele);} - 这只会增加一次，但*::after, br {counter-increment: ele; content: "element count " counter(ele);} - 每个br 都会增加两次。可能需要进一步检查。