我想为单词中的备用字母赋予绿色(或任何其他)颜色。
如何使用 CSS 做到这一点? Jquery 也适合我
提前致谢
HTML
<div class="try">
<span>G</span>
<span>d</span>
<span>d`s </span>
<span>O</span>
<span>w</span>
<span>n </span>
<span>C</span>
<span>o</span>
<span>u</span>
<span>n</span>
<span>t</span>
<span>r</span>
<span>y</span>
</div>
CSS
.try span:nth-of-type(even){
color:green;
}
.try span:nth-of-type(odd){
color:red;
}
如果你可以使用 jQuery,你可以使用这个代码片段:
$( "span" ).each(function( index ) {
var originalText = $( this ).text();
var newText = "";
for( var i = 0; i < originalText.length; i++)
{
if (i % 2 === 0)
newText += "<span>" + originalText.charAt(i) + "</span>";
else
newText += originalText.charAt(i);
}
$( this ).html(newText);
});
它用原始跨度内的跨度替换想要的字符,然后您可以设置该跨度的样式。
小提琴:http: //jsfiddle.net/m6RTW/
将字母设置在 a 中<span>
并设置它们的样式。
<p style="color:red;font-weight:bold;font-size:34px;">
G<span style="color:green">o</span>d'<span style="color:green">s</span>
o<span style="color:green">w</span>n c<span style="color:green">o</span>u<span style="color:green">n</span>t<span style="color:green">r</span>y
</p>
如果您想应用于CSS
不超过 10 个字母的文本,那么您可以将其拆分为跨度并对其应用类。
<span class="green">H</span>
<span>E</span>
<span class="green">L</span>
<span>L</span>
<span class="green">O</span>
.green
{
color:green;
}
将选定的字母放在 span 标签内并添加样式。
CSS:
.green {
color: green;
}
html:
<p>G<span class="green">o</span>d'<span class="green">s</span> o<span class="green">w</span>n co<span class="green">u</span>n<span class="green">t</span>r<span class="green">y</span></p>
或者添加偶/奇类(跨浏览器解决方案):
<div class="colors">
<span class="odd">a</span>
<span class="even">b</span>
<span class="odd">c</span>
<span class="even">d</span>
</div>
CSS:
.colors .odd {
color: red;
}
.colors .even {
color: green;
}
CSS 只能应用于整个元素。所以你需要把你的文本分成元素。您可以通过手动、javascript 或 HTML 生成来完成此操作。
为了保持 HTML 简短,您可以这样做:(请参阅http://jsfiddle.net/9TY4J/)
<SPAN class="fancyColors"><B>G</B>o<B>d</B> .... </SPAN>
并编写一个 CSS:
.fancyColors
{
color:red;
}
.fancyColors B
{
color:green;
font-weight:normal;
}