Question

＆＃13;

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

＆＃13;

在上面的代码段中：

看起来CSS计数器会忽略所有 标记。原因是？
在上面的代码段中，代表 7 和 8 的元素是什么？

Answer 1

问题说明

看起来CSS计数器忽略了所有 标记。原因是？

 标记，与其他标记一样空白＆＃39;元素，do support counters，但不幸的是，他们don't have an ::after pseudo-element。就像实例<input>元素一样，你不能通过CSS来实现内容生成。由于递增计数器发生在代码段中的::after伪元素中，因此 元素的计数器不会递增，因为br::after根本不存在。

在上面的代码片段中，元素7和8代表什么？＆＃34;

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

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

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

＆＃13;

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

＆＃13;

上面的例子还没有完成，因为它在上升一个级别时不会增加计数器。这是因为当元素打开时计数器已经递增，并且关闭HTML并且BODY不再增加计数器。

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

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

＆＃13;

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

＆＃13;

对于每种情况而言，它可能并不完美，但无论如何，你的问题似乎更具学术性。无论如何，我希望这个解释至少可以帮助你理解为什么在你的代码片段中 元素似乎根本没有反击。

CSS计数器如何工作？

1 个答案: