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地狱。

<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

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

虽然，对于一些如此简单的事情来说，一秒钟的工作并不是很繁重（除非你的页面中有数百个时钟）。

Answer 2

使用javascript和jQuery这可能是一个漫长的方式，但这是一个可能的解决方案。

分隔h，m＆amp;来自原始字符串的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);

然后，您可以使用CSS在#string范围内设置范围。

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

这是demo fiddle showing the above。

Answer 3

这只会在跨度中抛出字母并为它们提供相同的类。也许值得尊敬的提名lol： - ）

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的简单解决方案，并使用span-tag包装每个字符：

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

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

4 个答案: