9

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

4

5 回答 5

13

怎么用: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/

于 2012-08-31T15:49:19.983 回答
8

正如其他人所指出的，（不幸的是*）: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，以及以下证明是有问题的。

于 2012-08-31T15:48:20.103 回答
3 
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>

所以是的，只需将<span></span>其设计为最适合这种情况的样式即可。

编辑：

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

.client {
   color: #c0ff33;
}

并像这样使用它：

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

如果您想指定更多并确定您只span在内部使用您的样式，<p></p>您也可以像这样引入它：

p span.client {
   color: #c0ff33;
}

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

您也可以通过其他方式指定您的 p 类而不是跨度：

<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;
}
于 2012-08-31T15:37:59.707 回答
0

您可以将单词包装在 a 中span并设置样式。正如 Henrik Ammer 在评论中所说，没有:first-word.

于 2012-08-31T15:35:23.650 回答
0

我建议做这样的事情：

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

CSS：

.redcolor
{
    color: red
}

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

于 2012-08-31T15:51:44.420 回答