当我为我的面包店建立一个网站时，我想制作一个花哨的标题来触发每个字母的颜色。所以我可以利用跨度，但这是令人筋疲力尽的。我想使用：第一个字母或分别：first-char但没有任何作用。你们有谁知道怎么做？
谢谢和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;
}
答案 0 :(得分：9)
CSS中没有:nth-letter伪元素（并且没有:first-char）。 :first-letter伪元素（问题在标题和散文中提到但在代码中没有使用）有效，但是为了给其他字母着色，你必须包装它们中的每一个在它自己的元素中，通常是span。
答案 1 :(得分：7)
您必须使用js nth-everything-css才能使浏览器支持第n个字母的功能。
以下是 nth-everything concept（或愿望清单）的一些信息，此处（更重要的是）是具体的implementation和example其中一些愿望。
这是the code from codepen（有些蠢蠢），但正在努力。
<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>
答案 2 :(得分：0)
使用:: first-letter时工作正常。
检查this小提琴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;
}