选择第二个单词

Question

我有这个HTML：

<span>Lies Hendriks</span>

如何使用CSS选择第二个单词。我无法更改此文档的HTML。 我想给“Hendriks”另一种风格。或者我可以用JavaScript做到吗？

Answer 1

您需要拆分成单独的实体，以便为每个单词应用不同的样式。

<span style="style1">Lies</span><span style="style2">Hendriks</span>

无法使用JS或CSS选择性地将样式应用于单个单词而无需更改HTML本身。

Answer 2

你无法使用CSS，但是如果你知道你的结构（例如，它总是第二个单词需要以不同的方式设置），你可以使用JavaScript（假设你可以将JS注入页面） ，当然）。

这是一个可能有点复杂的例子，但如果你的HTML有：

<span>Lies Hendriks</span>

然后你就可以这样做（在你的DOM加载事件时）：

 var span1 = document.getElementById('span1');
 span1.innerHTML = span1.innerHTML.replace(/(\s+)(.*)/, '$1<span class="red">$2</span>');

假设你有

.red
{
    color: red;
}

你的CSS中的

上面的代码允许我在第一个单词red之后创建所有内容。这应该会让你知道如何做到这一点，具体取决于你的结构。