css - 我可以根据计数器值设置 content:counter 样式吗？

Question

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

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

使用 HTML 结构为

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

所有这些都可以正常工作，但是如果计数器值的长度为两位数，我想有条件地设置不同的样式（例如，将两位数与负数一起挤压letter-spacing）。关于如何执行此操作或解决方法的任何想法？

score 2 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

我知道这不是你真正想要的，但我做了一些研究，找不到任何 CSS 唯一方法来做到这一点，主要是因为正如@dystroy 所述

“你不能只使用 CSS 来做到这一点，因为 CSS 选择器中没有关于内容大小的任何内容。”

因此，css 无法知道 :before 部分中的内容有多长。

所以我想你真的应该稍微使用一下jQuery。试试这个 jsfiddle。

基本上，您可以做的是使用 css 计数器遍历要索引的元素，然后使用 .index() 属性查看它们的计数器是两位数还是三位数。请记住 .index() 当计数器从 1 开始时从 0 开始，所以在两位数条件检查中你应该输入

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

因为 counter = index + 1 -> if(counter > 9) = if(index > 8)

如果计数器是两位数，那么您将一个类添加到您的电影元素，以便您可以在您的 css 中自由地设置它的样式。

score -1 · Accepted Answer

我认为您正在寻找的内容在这篇文章中进行了讨论：使用 jQuery 选择和操作 CSS 伪元素，例如 ::before 和 ::after。我不认为你可以通过普通的 CSS 来做到这一点，但我可能弄错了。

4 回答 4