javascript 使用 CSS 为跨度中的第 n 个字母设置样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15994270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style the nth letter in a span using CSS
提问by n0pe
I have:
我有：
<span id="string">12h12m12s</span>
and I'm looking to make the h, mand ssmaller than the rest of the text. I've heard of the nth-letterpseudo element in css, but it doesn't seem to be working:
我期待作出h，m而s不是文本的其余部分小。我听说过nth-lettercss中的伪元素，但它似乎不起作用：
#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 spantags and style the tags. However, the string is updated every second and it seems parsing that often would be ressource intensive.
我知道我可以使用 javascript 来解析字符串并用周围的span标签替换字母并设置标签的样式。但是，该字符串每秒更新一次，并且似乎解析通常是资源密集型的。
采纳答案by Fabrício Matté
Performance-wise, I'd recommend a spanhell.
性能方面，我推荐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>
One span for each h, mand sletters so you can style them properly (can apply either the same or different styling for each).
每个h,m和s字母一个跨度，以便您可以正确设置它们的样式（可以为每个应用相同或不同的样式）。
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:
每个数字的另一个跨度，以便您可以缓存引用。总之，这是一个非常简单的本地时钟的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);
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).
尽管如此，对于如此简单的事情，每秒一次并不是很繁重的工作（除非您的页面中有数百个时钟）。
回答by orb
This only throws the letters in spans and gives them all the same class. Maybe worth an honorable mention lol :-)
这只会抛出跨度中的字母，并为它们提供相同的类。也许值得一提，哈哈:-)
JavaScript:
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:
HTML：
<body>
<span id="string">12h12m12s</span>
</body>
CSS:
CSS：
.smaller {
font-size: 10px;
}
回答by dev
This might be a long winded way of doing this using javascript and jQuery, but here's a possible solution.
这可能是使用 javascript 和 jQuery 执行此操作的冗长方法，但这里有一个可能的解决方案。
Separate the h,m& sfrom the original string.
将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);
Then you can style the spans within #stringwith CSS.
然后，您可以#string使用 CSS设置跨度的样式。
#string{font-size:1.2em}
#string > span{font-size:0.8em}
Here is a demo fiddle showing the above.
这是一个演示小提琴，显示了上述内容。
回答by Borbo
Simple solution with CSS and wrapping each character with a span-tag:
使用 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>
