css - 我可以样式内容 :counter based on counter value?

Question

我正在使用 CSS2.1 计数器将数字应用于棋盘上的人，以实现棋盘游戏，其棋盘图使用 HTML 和 CSS，方法如下:

.ply  {counter-increment:main;}
.move:before {content:counter(main);}

HTML 结构为

<ply>
  <move...>
  <ply>
    <move...>
  </ply>
</ply>

所有这些工作正常，但我想有条件地设置计数器值的样式如果它的长度是两位数(将两位数与负字母间距，例如)。关于如何执行此操作或解决方法的任何想法？

Answer 1

事实证明，我们可以使用 getComputedStyle 检索相关计数器的值，使用第二个参数指定伪元素，该伪元素为其指定了计数器作为内容:

value = window.getComputedStyle(elt, ':before').content;

然后我们可以应用这样的样式

if (value>=100) { elt.style.letterSpacing = "-2px"; }

这就是我们想要的，尽管它需要在可能发生变化时使用 JS 遍历所有可能受影响的元素。