1

如果我有类似的东西

<p id="something">My Text Here</p>

是否可以在 CSS 中使用某种伪选择器将样式仅应用于我的文本中的某些文本元素？

例如，我想要：

“我的”待色：红色；和“文本”颜色：蓝色；

4

4 回答 4

6

不，这是不可能的。

有诸如:first-letterand之类的伪选择器:first-line，但是如果不将它们包装在可以单独设置样式的元素中，则无法选择单个单词：

<p id="something">
    <span class="foo">My</span> 
    <span class="bar">Text</span> 
    <span class="baz">Here</span>
</p>

然后，您可以单独设置它们的样式：

.foo {
    color: #ff0000;
}
.bar {
    color: #00ff00;
}
.baz {
    color: #0000ff;
}
于 2012-06-21T07:31:25.200 回答
4

不可以。如果您希望文本的某些部分具有不同的颜色，则必须将它们包装在单独的元素中（很可能是 ''s）。例如：

<p id="something"><span class="red">My</span> <span class="blue">Text</span> Here</p>

当然，这也需要适当的 CSS.red和.blue.

上述的例外是伪选择器:first-letter和:first-line，但它们不提供任何灵活性。

于 2012-06-21T07:30:41.523 回答
0

您可以使用首字母伪类来设置首字母的样式

p:first-letter
{ 
font-size:200%;
color:#8A2BE2;
}

但是你不能对第二个“文本”使用伪类，你必须将它包装在一个 html 标记中并单独设置它的样式。

用不同的样式设置单词是不可能的。

于 2012-06-21T07:32:16.967 回答
0

其他用户已经告诉您，这在本地是不可能的。如果您使用 jQuery，正如我从您的标签中假设的那样，您可以从 JavaScript 中做一些小技巧，并使用以下命令“标记”P标签中的文本：

$("p").html($.map($("p").text().split(" ")​,function (i,e) {return "<span id='w"+e+"'>"+i+"</span>";}).join(" "));

此命令采用选择器（p在本例中，但您可以使用p#myId等）并替换每个单词：

 This is a sentence

变成

 <span id='w0'>This</span>
 <span id='w1'>is</span>
 <span id='w2'>a</span>
 <span id='w3'>sentence</span>

所以你可以使用这样的 CSS：

 p span.w2 {color: red;}

为第三个单词着色。

于 2012-06-21T07:45:49.047 回答