Html 仅更改文本的前 6 个字符的颜色 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12218448/
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
change color css only first 6 character of text
提问by Rafee
I have phrase as Client Testimonialand i want to change only the Clienti have used only first-letterbut is there any method in css to change color .. no javascript please.
我有短语 asClient Testimonial并且我只想更改Client我只使用过的first-letter但在 css 中是否有任何方法可以更改颜色 .. 请不要使用 javascript。
回答by HymanJoe
How about using :before?
怎么用:before？
I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :beforerule:
我会将文本从“客户推荐”更改为“推荐”，然后使用 CSS 应用:before规则：
HTML:
HTML：
<div class="word">Testimonial</div>????????
CSS:
CSS：
.word {
color: black;
}
.word:before {
color: red;
content: "Client ";
}
Example: http://jsfiddle.net/LvZt7/
回答by David says reinstate Monica
As noted by others, there is (unfortunately*) no :first-wordpseudo-selector available in CSS (even version 3 or 4, so far as I currently know). However, there are two possibilities that exist without JavaScript, though both have their failings.
正如其他人所指出的，（不幸的是*）:first-wordCSS 中没有可用的伪选择器（就我目前所知，即使是版本 3 或 4）。然而，没有 JavaScript 存在两种可能性，尽管两者都有其缺点。
The first, and easiest, is to simply wrap the first word in a span:
第一个也是最简单的方法是简单地将第一个单词包装在一个跨度中：
<p><span>Client</span> Testimonial</p>??????????????????????????????????
And style the span with the highlight:
并使用突出显示设置跨度样式：
p span {
color: #f90;
}
While this approach does require adding an extra, in this case, spanelement for styling purposes it is simple to implement, and works reliably cross-browser.
虽然这种方法确实需要添加一个额外的span元素，在这种情况下，用于样式目的的元素实现起来很简单，并且可以跨浏览器可靠地工作。
The second is slightly more fragile, though avoids adding the extraneous spantag, but requires, instead, that you add an attribute:
第二个稍微更脆弱，虽然避免添加无关的span标签，但要求您添加一个属性：
<p data-highlightword="Client">Client Testimonial</p>??????????????????????????????????
With the following CSS:
使用以下 CSS：
p[data-highlightword] {
position: relative;
}
p[data-highlightword]::before {
content: attr(data-highlightword);
color: #f90;
position: absolute;
top: 0;
left: 0;
}?
This approach relies on the addition of a single attribute to a single element, but does require extra CSS and will only work in compliant browsers. Which is almost all of them, now, with only IE 8, or perhaps 9, and below proving problematic.
这种方法依赖于向单个元素添加单个属性，但确实需要额外的 CSS，并且只能在兼容的浏览器中使用。现在几乎所有这些都只有 IE 8，或者可能是 9，以及以下证明有问题。
回答by Mauno V?h?
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>
so yes, just style it with <span></span>its perfect for that kind of situations.
所以是的，只需用<span></span>它完美的风格来设计那种情况。
Edit:
编辑：
This edit is not directed for the post author but for someone just learning to use css: based on "best practises" one should consider using separate .css file for setting styles in a manner like:
此编辑不是针对帖子作者，而是针对刚刚学习使用 css 的人：基于“最佳实践”，应该考虑使用单独的 .css 文件以如下方式设置样式：
.client {
color: #c0ff33;
}
and using it like:
并使用它：
<p><span class="client">Client</span> Testimonial</p>
If you want to specify more and be certain that you only use your spanstyle inside <p></p>you could also introduce it like:
如果你想指定更多并确定你只span在里面使用你的风格，<p></p>你也可以像这样引入它：
p span.client {
color: #c0ff33;
}
Fiddle: http://jsfiddle.net/LvZt7/97/
小提琴：http: //jsfiddle.net/LvZt7/97/
You could also do it other way around specifying your p class and not span:
您也可以通过其他方式指定您的 p 类而不是跨度：
<p class="client"><span>Client</span> Testimonial</p>
and
和
p.client span {
color: #c0ff33;
}
or just specifying all p span html markings to have text inside span with color #c0ff33:
或者只是指定所有 p 跨度 html 标记在跨度内具有颜色的文本#c0ff33：
<p><span>Client</span> Testimonial</p>
and
和
p span {
color: #c0ff33;
}
回答by Corey Ogburn
You could wrap the word in a spanand style it instead. As Henrik Ammer stated in a comment, there is no :first-word.
您可以将单词包裹在 a 中span并为其设置样式。正如 Henrik Ammer 在评论中所说，没有:first-word.
回答by tehdoommarine
i'd recommend doing something like this:
我建议做这样的事情：
<span class = "redcolor">Client </span> Testimonial
CSS:
CSS：
.redcolor
{
color: red
}
That way if you want anything in red, just give it a div/span with that class
这样，如果你想要任何红色的东西，只需给它一个带有该类的 div/span
