Question

客户不喜欢我们在其网站上使用的当前字体中数字的显示方式，因此他们只想切换数字字符的字体。而不是进入并围绕每组数字包裹一个跨度，是否有一些秘密的伪选择器可以做到这一点？类似的东西：

:numeric {font-family: Helvetica, sans-serif;}

使用JS的东西，比如：

str = str.replace(/([1234567890]+)/g,'<span class="num">$1</span>');

但效率更高，会包裹数字串而不是*每个单独的数字？关于为什么这会是一个坏主意的任何想法？谢谢！

来源： I got the javascript idea from this question

Answer 1

你应该使用css计数器。 CSS计数器允许您根据文档中的位置调整内容的外观。实际上，计数器是由CSS维护的变量，其值可以通过CSS规则递增，以跟踪它们被使用的次数。

以下是如何将它用于有序列表：

.list {
counter-reset: name-counter;

list-style: none;
margin:0;
padding:0;
}

.list li:before {
content: counter(name-counter);
counter-increment: name-counter;
font-size:20px;
color:#ff0000;
margin-right:20px;
}

你有这样的标记：

<ol class="list">

<li>Aenean mauris risus?</li>
<li>Suspendisse id ligula</li>

<li>Cras sed dolor sit</li>
<li>Ut suscipit</li>

<li>Donec mattis</li>
<li>Cras ultricies</li>

</ol>

这是一个jsfiddle http://jsfiddle.net/c11utd0w/

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

仅指定数字字符的字体？

1 个答案: