Question

我想用不同颜色的前三个字符显示标题。

我知道这可以用<h2><span>The</span> awsome title</h2>完成，但我想知道是否有某种“nth-child”属性可以应用于元素内的字符。

我想通过插入其他元素（等等）来避免破坏文本

欢迎使用（相对）crossbrowser解决方案。

Answer 1

没有比你现有的更清洁的方式。

<h2><span>The</span> awesome title</h2>

使用CSS：

h2 {
    color: red
}
h2 span {
    color: blue
}

有:first-letter和:first-line，但没有:first-word。

我想这样做的原因是很难准确定义“单词”应该是什么。

在不更改标记的情况下执行此操作的唯一方法是使用JavaScript将第一个单词用<span>括起来（并以相同的方式设置样式），但我只建议您使用其他网站已经严重依靠JavaScript来运行。

Answer 2

是的，JavaScript是我能想到的唯一方式（正如其他人已经说过的那样！）。 Demo here

$(function() {
    $('h2').each(function(){
        $(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
    });
});

Answer 3

对于您正在讨论的当前CSS运算符nth-whatever，

，这是不可能的

然而，这可以通过JavaScript完成...如果你想要沿着这条路走下去，那么最好的方法就是使用<span>标签，因为那样你就不会遇到任何问题禁用JS。

这完全取决于你，但是如果我处于你的位置，我会直接使用JS，它被称为渐进增强和不引人注目的JS，只要内容没有被破坏，如果用户禁用JS它是可以接受，见这里：

Answer 4

可悲的是，没有办法用样式表来做到这一点。 CSS3为我们提供了first-letter和first-line，但不是first-word，当然也不是first-n-letters。

有关详情，请参阅此问题的答案：CSS to increase size of first word

~~JQuery确实实现了first-word选择器，所以如果你准备好使用Javascript选项，你可以做到。~~

嘿。看起来JQuery实际上并没有真正实现它。我看到它时一定是在使用插件。

但是这里有一个可能有用的Javascript解决方案的链接：http://www.dynamicsitesolutions.com/javascript/first-word-selector/