Question

我的短语为Client Testimonial，我只想更改Client我只使用first-letter，但是css中有任何方法可以改变颜色..请不要使用javascript。

Answer 1

如何使用:before？

我会将文本从“客户推荐”更改为“推荐”，然后使用CSS应用:before规则：

<强> HTML：

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

<强> CSS：

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

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

Answer 2

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

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

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

用突出显示的方式设置范围：

p span {
    color: #f90;
}

JS Fiddle demo

虽然这种方法确实需要添加一个额外的，在这种情况下，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 Fiddle demo

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

Answer 3

<p><span style="color: #c0ff33;">Client</span> Testimonial</p>

所以是的，只需使用来设置它，这对于那种情况非常适合。

修改：

此编辑不针对帖子作者，而是针对刚刚学习使用css的人：基于“最佳实践”，应考虑使用单独的.css文件以如下方式设置样式：

.client {
   color: #c0ff33;
}

并使用它：

<p><span class="client">Client</span> Testimonial</p>

如果您想要指定更多内容并确定仅在span内使用样式，则还可以将其引入：

p span.client {
   color: #c0ff33;
}

小提琴：http://jsfiddle.net/LvZt7/97/

你也可以通过其他方式来指定你的p类而不是span：

<p class="client"><span>Client</span> Testimonial</p>

和

p.client span {
   color: #c0ff33;
}

或者只是指定所有p span html标记，使文本在span中的颜色为#c0ff33：

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

和

p span {
   color: #c0ff33;
}

Answer 4

你可以将这个单词包装在span中并改为样式。正如Henrik Ammer在评论中所说，没有:first-word。

Answer 5

我建议做这样的事情：

<span class = "redcolor">Client </span> Testimonial

CSS：

.redcolor
{
    color: red
}

这样，如果你想要任何红色的东西，只需给它一个div / span与该类

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

5 个答案: