CSS :nth-letter 伪元素不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24705721/
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
:nth-letter pseudo-element is not working
提问by Michael Schwark
as I build a site for my bakery I would like to make a fancy headline triggering the color for each letter. So I could make use of span but this is exhausting. I wanted to use :first-letteror respectively :first-charbut nothing works. Does anyone of you have an idea how to do it?
当我为我的面包店建立一个网站时，我想制作一个花哨的标题来触发每个字母的颜色。所以我可以利用跨度，但这很累人。我想:first-letter分别使用或:first-char但没有任何效果。你们中有人知道怎么做吗？
Thanks and Saludos!
谢谢和Saludos！
h4 {
font-size: 100px;
margin-bottom: 20px;
margin-top: 0;
padding: 0px;
font-family: "Tangerine", cursive;
font-weight: normal;
}
h4:nth-letter(2) {
color: #06c !important;
}
h4:nth-letter(3) {
color: #c9c !important;
}
回答by Jukka K. Korpela
There is no :nth-letterpseudo-element (and no :first-char) in CSS. The :first-letterpseudo-element (which the question mentions in the title and in the prose but does not use in the code) works, but to color other letters, you mustwrap each of them in an element of its own, normally span.
CSS 中没有:nth-letter伪元素（也没有:first-char）。该:first-letter伪元素（这问题提到在标题和散文，但在代码中不使用）的作品，但其他颜色的字母，你必须换他们每个人在自己的元素，正常span。
回答by Flavien Volken
You must be using the js nth-everything-css to enable your browser to support nth-letter feature.
您必须使用 js nth-everything-css 才能使您的浏览器支持第 n 个字母功能。
Here's some information on the nth-everythingconcept(or wish-list), and here (more importantly) is a concrete implementationand exampleof some of those wishes.
这里有一些关于nth-everything概念（或愿望清单）的信息，这里（更重要的是）是其中一些愿望的具体实现和示例。
Here's the code from codepen(somewhat mooshed) but working.
<html>
<style>
#letters:nth-letter(even){
color:red;
}
#letters:nth-letter(odd){
color:blue;
}
</style>
<script type="text/javascript" src="https://nt4.com/js/jquery"></script>
<script>
(function($) {
$.fn.nthEverything = function() {
var styleSuffix = "-nthEvery",
cssPattern = /\s*(.*?)\s*\{(.*?)\}/g,
cssComments = /\s*(?!<")\/\*[^\*]+\*\/(?!")\s*/gm,
partsPattern = /([^:]+)/g,
nthPattern = /(\w*)-(\w*)(\((even|odd|[\+-n\d]{1,6})\))?/,
count, parsedStyleMap = {}, genCSS = '',
runPeriods = function(period, className, a, length, offset) {
var inBy = 0, sAt = Number(period), n, zB, zE, bF, eF, oldN = -1;
if (period === 'odd' || period === 'even') {
sAt = (period === 'odd') ? 1 : 2;
inBy = 2;
} else if (/^\d+$/.test(period)) {
sAt = period - offset, inBy = 0;
} else {
zB = (/^(\+|-)?\d+/).exec(period);
zE = (/(\+|-)?\d+$/).exec(period);
sAt = (zE) ? Number(zE[0]) : 1;
inBy = (zB) ? Number(zB[0]) : 1;
bF = (zB) ? zB.length - 1 : 0;
eF = (zE) ? zE.length : 0;
if ((period.substr(bF, period.length - eF - bF).charAt(0)) === '-')
inBy *= -1;
}
// Start index at 0;
for (n = --sAt; n < length; n += inBy) {
if (n < 0 || n === oldN) break;
if (a[n] == null) a[n] = className;
else a[n] += " " + className;
oldN = n;
}
}, createSpan = function(className, content) {
return '<span class="' + className + '">' + content + '</span>';
}, processPeriod = function(classNames, textArray) {
var newText = '', n, className;
for (n = 0; n < classNames.length; n++) {
className = classNames[n];
if (className == null) newText += textArray[n];
else newText += createSpan(className, textArray[n]);
}
return newText;
}, prepareTxt = {
letter: function(text) {
return text.split('');
}
}, pseudoFunc = {
first: {}, last: {}, nth: {
letter: function(period) {
return period;
}
}
}, loopRecursive = function(contents, allText, parsedStyle) {
var func = parsedStyle.func,
text, length, classNames, className, cat, period;
contents.each(function() {
if (this.nodeType === 1) {
loopRecursive($(this).contents(), allText, parsedStyle);
} else if (this.nodeType === 3) {
text = prepareTxt[func](this.nodeValue);
length = text.length;
classNames = new Array(length);
for (var i = 0; i < parsedStyle.period.length; i++) {
className = parsedStyle.className[i];
cat = parsedStyle.cat[i];
period = parsedStyle.period[i];
runPeriods(pseudoFunc[cat][func](period, allText, length), className, classNames, length, count);
}
$(this).replaceWith(processPeriod(classNames, text));
count += length;
}
});
return count;
}, parse = function(css) {
var matches, nthMatch, nthFound = false,
i, thisPeriod, selectors, style, selector, parts, nth, pseudo, cat, func, period, normSelector, ident, className;
css = css.replace(cssComments, '').replace(/\n|\r/g, '');
while ((matches = cssPattern.exec(css)) !== null) {
selectors = matches[1].split(',');
style = matches[2];
for (i = 0; i < selectors.length; i++) {
selector = selectors[i];
parts = selector.match(partsPattern);
selector = parts.shift();
nth = parts.shift();
pseudo = (parts.length !== 0) ? ':' + parts.join(':') : '';
if ((nthMatch = nthPattern.exec(nth)) !== null) {
nthFound = true;
cat = nthMatch[1];
func = nthMatch[2];
period = (nthMatch[4] != null) ? nthMatch[4] : cat + func;
normSelector = selector.replace('#', 'id').replace('.', 'class');
ident = normSelector + func;
className = normSelector + cat + func + period + styleSuffix;
if ((thisPeriod = parsedStyleMap[ident]) != null) {
thisPeriod.className.push(className);
thisPeriod.period.push(period);
thisPeriod.style.push(style);
thisPeriod.pseudo.push(pseudo);
thisPeriod.cat.push(cat);
} else {
parsedStyleMap[ident] = {
element: selector,
func: func,
className: [className],
cat: [cat],
period: [period],
style: [style],
pseudo: [pseudo]
};
}
} else if (nthFound === true) {
genCSS += selector + "{" + style + "}";
}
}
}
}, applyStyles = function() {
var id, parsedStyle, b;
for (id in parsedStyleMap) {
parsedStyle = parsedStyleMap[id];
func = parsedStyle.func;
$(parsedStyle.element).each(function() {
var $this = $(this); count = 0;
loopRecursive($this.contents(), $this.text(), parsedStyle);
});
for (b = 0; b < parsedStyle.className.length; b++)
genCSS += "." + parsedStyle.className[b] + parsedStyle.pseudo[b] + "{" + parsedStyle.style[b] + "}";
}
$('<style>' + genCSS + '</style>').appendTo('head');
};
$('link[rel=stylesheet],style').each(function() {
if ($(this).is('link')) $.get(this.href).success(function(css) { parse(css); });
else parse($(this).text());
}); applyStyles();
};
})(jQuery);
$(function() {
$.fn.nthEverything();
});
</script>
<p id="letters">Hover a red letter. Cool, hu?</p>
</html>
回答by GCallie
Works fine when using ::first-letter.
使用 ::first-letter 时效果很好。
Check thisfiddle http://jsfiddle.net/n7s75/
检查这个小提琴http://jsfiddle.net/n7s75/
h4 {
font-size:100px;
margin-bottom:20px;
margin-top:0;
padding:0px;
font-family:'Tangerine', cursive;
font-weight:normal;
}
h4:first-letter {
color:#06C !important;
}
