样式使用CSS中跨度的第n个字母(Style the nth letter in a span us

我有：

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

我期待，使h ， m和s比文本的其余部分小。我听说过的nth-letter在CSS伪元素，但它似乎并没有被工作：

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

我知道我可以使用JavaScript来解析字符串，代之以围绕信span标签和风格标签。但是，字符串每秒更新一次，它似乎解析，往往会被密集的ressource。

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

小提琴

这说明缓存选择的基本思路。如果不重新创建的元素，你也有很好的性能提升。

不过，一旦第二个是不是这么简单的东西非常繁重的工作（除非你有上百个时钟在你的页面）。

Answer 2:

这可能是这样使用JavaScript和jQuery的长篇大论方式，但这里有一个可能的解决方案。

分离h ， m ＆ s从原来的字符串。

string = $('#string').text();

hD = string.substr(0,2)
h = "<span>"+string.substr(2,1)+"</span>";
mD = string.substr(3,2)
m = "<span>"+string.substr(5,1)+"</span>";
sD = string.substr(6,2)
s = "<span>"+string.substr(8,1)+"</span>";

finalString = hD + h + mD + m + sD + s;

$('#string').html(finalString);

然后你就可以在风格跨度#string与CSS。

#string{font-size:1.2em}
#string > span{font-size:0.8em}

这里是一个表示对上述演示小提琴。

Answer 3:

这仅抛出跨度的信件，并给他们所有的同一类。也许值得荣誉奖笑:-)

的jsfiddle

JavaScript的：

var str = document.getElementById('string'),
    chars = str.innerHTML.split('');

for (var i = 0; i < chars.length; i++) {
    if (chars[i].match(/[hms]/)) {
        chars[i] = "<span class='smaller'>" + chars[i] + "</span>";
    }
}
str.innerHTML = chars.join('');

HTML：

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

CSS：

.smaller {
    font-size: 10px;
}

Answer 4:

用CSS和包装，跨度标签每个字符简单的解决方案：

#text span:nth-child(2) {
  color: #ff00ff;
}

#text span:nth-child(5) {
  color: #00ffff;
}

#text {
  font-size: 20px;
}

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

文章来源: Style the nth letter in a span using CSS