我可以使用伪选择器来设置单个单词的样式吗？

Question

如果我有类似

的话

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

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

示例，我想：

“我的”是颜色：红色; 和“文字”颜色：蓝色;

Answer 1

不，这是不可能的。

有:first-letter和: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;
}

Answer 2

没有。如果您希望文本的某些部分具有不同的颜色，则必须将它们包含在单独的元素中（最有可能的是，＆＃39;＆＃39; s）。例如：

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

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

以上例外是伪选择器:first-letter和:first-line，但这些不提供任何灵活性。

Answer 3

您可以使用第一个字母伪类来设置第一个字母的样式

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

但你不能将伪类用于第二个“文本”，你必须将它包装在一个html标签中。单独设计它。

不同的样式字不可能。

Answer 4

其他用户已经告诉过你，本身不可能。 如果你使用jQuery，正如我在你的标签中假设的那样，你可以用JavaScript做一点诡计，并用P标记“标记”{：1}}标签中的文字：

$("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;}

为第三个单词着色。