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

Question

我有:

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

并且我希望使 h、m 和 s 小于文本的其余部分。我听说过 css 中的 nth-letter 伪元素，但它似乎不起作用:

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

我知道我可以使用 javascript 来解析字符串并用周围的 span 标签替换字母并设置标签的样式。但是，该字符串每秒更新一次，而且似乎解析通常会占用大量资源。

Answer 1

在性能方面，我建议使用 span hell 。

<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);

Fiddle

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

不过，对于如此简单的事情来说，每秒一次并不是很繁重的工作(除非您的页面中有数百个时钟)。