使用CSS样式在span中的第n个字母 [英] Style the nth letter in a span using CSS

问题描述

我有：

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

我想让 h ， m 和 s 小于文本的其余部分。我听说过css中的 nth-letter 伪元素，但它似乎不工作：

< pre class =lang-css prettyprint-override> #string：nth-​​letter（3），
#string：nth-​​letter（6），
#string：nth -letter（9）{
font-size：2em;
}


我知道我可以使用javascript来解析字符串， span 标记和样式标记。但是，字符串每秒更新一次，似乎解析通常会占用大量资源。

解决方案

d建议 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 c $ c> m 和 s 字母，以便您可以正确设置样式（可以对每个字符应用相同或不同的样式）。

每个数字的另一个span，因此可以缓存引用。总之，这里是一个非常简单的本地时钟的JS：

  //缓存数容器元素引用
 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] =小时< 10？ '0'+ hours：hours; 
 m [textProp] = mins< 10？ '0'+ mins：mins; 
 s [textProp] = secs< 10？ '0'+ secs：secs; 
} 
 tick（）; 
 setInterval（tick，1000）; 
  

Fiddle

这说明了缓存选择器的基本概念。

虽然，一秒钟对于这么简单的东西来说不是很重的工作（除非你有您的网页上有数百个时钟）。

I have:

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

and I'm looking to make the h, m and s smaller than the rest of the text. I've heard of the nth-letter pseudo element in css, but it doesn't seem to be working:

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

I know I could use javascript to parse the string and replace the letter with surrounding span tags and style the tags. However, the string is updated every second and it seems parsing that often would be ressource intensive.

解决方案

Performance-wise, I'd recommend a 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>

One span for each h, m and s letters so you can style them properly (can apply either the same or different styling for each).

And another span for each number so you can cache the references. In sum, here's a JS for a very simplistic local-time clock:

//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

This illustrates the basic idea of cached selectors. By not re-creating the elements, you also have a good performance boost.

Though, once a second isn't very heavy work for something so simple (unless you have hundreds of clocks in your page).

这篇关于使用CSS样式在span中的第n个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！