改变颜色css只有前6个字符的文字

Question

我有短语作为Client Testimonial,我想只改变Client我只使用first-letter但是有任何方法在CSS改变颜色..没有javascript请.

Answer 1

怎么用:before？

我会将文本从"Client Testimonial"更改为"Testimonial",然后使用CSS应用:before规则:

HTML:

<div class="word">Testimonial</div>????????

CSS:

.word {
 color: black;       
}
.word:before {
 color: red;
 content: "Client ";
}

示例:http://jsfiddle.net/LvZt7/

Answer 2

正如其他人所指出的那样(遗憾的是*):first-wordCSS中没有伪选择器(即使是版本3或4,据我目前所知).但是,没有JavaScript存在两种可能性,尽管它们都存在缺陷.

第一个也是最简单的方法是简单地将第一个单词包装在一个范围内:

<p><span>Client</span> Testimonial</p>??????????????????????????????????

并突出显示跨度的样式:

p span {
    color: #f90;
}

JS小提琴演示.

虽然这种方法确实需要添加一个额外的,在这种情况下,span用于样式的元素,它实现起来很简单,并且可以跨浏览器可靠地工作.

第二个稍微更脆弱,但避免添加无关span标签,但需要添加一个属性:

<p data-highlightword="Client">Client Testimonial</p>??????????????????????????????????

使用以下CSS:

p[data-highlightword] {
    position: relative;
}

p[data-highlightword]::before {
    content: attr(data-highlightword);
    color: #f90;
    position: absolute;
    top: 0;
    left: 0;
}?

JS小提琴演示.

这种方法依赖于向单个元素添加单个属性,但确实需要额外的CSS,并且只能在兼容的浏览器中使用.几乎所有这些,现在,只有IE 8,或者可能是9,以及证明有问题.