Css 是否可以根据计数器值设置内容样式：计数器？

我正在使用CSS2.1计数器将数字应用到棋盘游戏的实现中，该棋盘游戏的棋盘图使用HTML和CSS，方法如下：

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

将HTML结构化为

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

---

所有这些都很好，但如果计数器值的长度为两位数，我希望有条件地对其进行样式设置（例如，将两位数压缩在一起，并使用负数

字母间距
）。关于如何做到这一点或解决办法，有什么想法吗？
我想这篇文章讨论了您想要的内容：。我不认为你可以通过简单的css来实现这一点，但我可能弄错了。
我想你要找的是在这篇文章中讨论的内容：。我不认为你可以通过简单的css来实现这一点，但我可能弄错了。
你不能只使用css来实现这一点，因为内容的大小与此无关

这可能是一个anwser，但如果您想要解决问题，可以使用javascript

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

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

演示：
您不能仅使用CSS来完成此操作，因为内容的大小与CSS无关

这可能是一个anwser，但如果您想要解决问题，可以使用javascript

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

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

演示：
我知道这不是你真正想要的，但我做了一些研究，找不到任何css唯一的方法来实现这一点，基本上是因为@dystroy所说的

“您不能仅使用CSS来执行此操作，因为CSS选择器中没有关于内容大小的内容。”

所以css无法知道：before部分中的内容有多长

所以我想你真的应该使用jQuery一点。试试看

基本上，您可以使用css计数器对正在索引的元素进行迭代，然后使用.index（）属性查看它们的计数器是两位数还是三位数。
记住，当计数器从1开始时，index（）从0开始，因此在两位数条件检查中，您应该将

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

因为计数器=索引+1->if（计数器>9）=if（索引>8）

如果计数器是两位数，那么你可以在电影元素中添加一个类，这样你就可以在css中自由设置样式。
我知道这不是你真正想要的，但我做了一些研究，找不到css唯一的方法来实现这一点，基本上是因为@dystroy所说的

“您不能仅使用CSS来执行此操作，因为CSS选择器中没有关于内容大小的内容。”

所以css无法知道：before部分中的内容有多长

所以我想你真的应该使用jQuery一点。试试看

基本上，您可以使用css计数器对正在索引的元素进行迭代，然后使用.index（）属性查看它们的计数器是两位数还是三位数。
记住，当计数器从1开始时，index（）从0开始，因此在两位数条件检查中，您应该将

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

因为计数器=索引+1->if（计数器>9）=if（索引>8）

如果计数器是两位数，那么您可以向movie元素添加一个类，以便在css中自由设置其样式。
事实证明，我们可以使用
getComputedStyle
检索相关计数器的值，使用第二个参数指定将计数器指定为内容的伪元素：

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

然后我们可以应用一种样式，例如

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

这正是我们想要的，尽管它需要在可能发生更改时使用JS遍历所有可能受影响的元素。
事实证明，我们可以使用
getComputedStyle
检索相关计数器的值，使用第二个参数指定计数器被指定为内容的伪元素：

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

然后我们可以应用一种样式，例如

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

这正是我们想要的，尽管它需要在可能发生更改时使用JS遍历所有可能受影响的元素。
这个问题只涉及CSS。没有jQuery参与引用OP：“关于如何做或解决方法有什么想法吗？”OP正在寻找一种方法，将特定样式添加到与某个索引匹配的元素中。断言不可能通过CSS实现这一点并非100%正确。对于特定情况，有一个解决方案，例如
move+ply>move+ply
（重复5x）。你没有提出一个变通方案。链接的问题显示了如何可能使用jQuery操作伪元素，但问题的最重要部分尚未得到回答：“……基于计数器值”。这个问题只涉及CSS。没有jQuery参与引用OP：“关于如何做或解决方法有什么想法吗？”OP正在寻找一种方法，将特定样式添加到与某个索引匹配的元素中。断言不可能通过CSS实现这一点并非100%正确。对于特定情况，有一个解决方案，例如
move+ply>move+ply
（重复5x）。你没有提出一个变通方案。链接的问题显示了如何使用jQuery操作伪元素，但问题最重要的部分尚未得到回答：“……基于计数器值”。这并不是真正回答您的问题，但如果您只是在：before css中设置负号间距会怎么样？虽然内容保持一个数字，但不会产生任何可见的效果，但当内容达到两个数字时，它们看起来会像你想要的那样被压缩……这并不是真正回答你的问题，但是如果你只是在css之前的：中设置负向字母间距会怎么样？虽然内容保持一个数字，但不会产生任何可见的效果，但当内容达到两个数字时，它们看起来会像你想要的那样被压缩……不。我刚刚演示了如何根据内容长度更改css。问题的css和标记是错误的，我让OP根据