Question

我正在使用CSS2.1计数器在棋盘游戏的实施中将数字应用于棋盘游戏，其棋盘图使用HTML和CSS，通过以下方式执行：

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

HTML结构为

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

所有这一切都很好，但我想有条件地设置计数器值，如果它的长度是两位数（例如，将两个数字与负letter-spacing一起挤压）。有关如何执行此操作或解决方法的任何想法？

Answer 1

事实证明，我们可以使用getComputedStyle检索有问题的计数器的值，使用第二个参数指定计数器被指定为内容的伪元素：

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

然后我们可以应用

等样式

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

我们想要的是什么，尽管它需要在JS可能已经发生变化的情况下遍历所有可能受影响的元素。

Answer 2

由于css selectors中没有关于内容大小的内容，因此您无法仅使用CSS。

这可能是一个灵感，但如果你想要一个解决方法，可以使用javascript。

这是一个例子（使用jquery），当文本长度超过2个字符时，我会更改文本的颜色：

$('.move').each(function(){
    if ($(this).text().length>2) $(this).css({color:'red'});
});

Answer 3

我知道这不是你想要的，但我做了一些研究，找不到任何css只能这样做，基本上是因为@dystroy所说

“你不能只使用CSS，因为css选择器中没有关于内容大小的内容。”

因此，css无法知道：部分之前的内容有多长。

所以我猜你应该真的使用jQuery了。试试this jsfiddle。

基本上你可以做的是迭代你用css计数器索引的元素，然后使用.index（）属性看看他们的计数器是双位还是三位数。记住.index（）从计数器从1开始时从0开始，所以在双位数条件下检查你应该放

if($(this).index() > 8) ...

因为counter = index + 1 - ＆gt; if（counter＆gt; 9）= if（index＆gt; 8）

如果计数器是两位数，那么你可以在电影元素中添加一个类，这样你就可以在css中自由设置它。

Answer 4

我认为你要找的是这篇文章中讨论的内容：Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery。我认为你不能通过简单的CSS来做到这一点，但我可能会弄错。