使用CSS设置跨度中的第n个字母的样式

Question

我有:

<span id="string">12h12m12s</span>

而且我正在寻找h,m并且s比文本的其他部分更小.我听说过nth-lettercss 中的伪元素,但它似乎不起作用:

#string:nth-letter(3),
#string:nth-letter(6),
#string:nth-letter(9) {
    font-size: 2em;
}

我知道我可以使用javascript来解析字符串并用周围的span标签替换字母并设置标签样式.但是,字符串每秒更新一次,似乎解析通常是资源密集型.

Answer 1

性能方面,我推荐一个span地狱.

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

一个跨度为每一个h,m和s信这样你就可以适当他们的风格(或者适用于每一个相同或不同的造型).

每个数字的另一个跨度,以便您可以缓存引用.总而言之,这是一个非常简单的本地时钟的JS:

//cache number container element references
var h = document.getElementById('h'),
    m = document.getElementById('m'),
    s = document.getElementById('s'),
    //IE feature detection
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText';

function tick() {
    var date = new Date(),
        hours = date.getHours(),
        mins = date.getMinutes(),
        secs = date.getSeconds();
    h[textProp] = hours < 10 ? '0'+hours : hours;
    m[textProp] = mins < 10 ? '0'+mins : mins;
    s[textProp] = secs < 10 ? '0'+secs : secs;
}
tick();
setInterval(tick, 1000);

小提琴

这说明了缓存选择器的基本思想.通过不重新创建元素,您也可以获得良好的性能提升.

虽然,对于一些如此简单的事情(除非你的页面中有数百个时钟),一秒钟的工作并不是很繁重.