css - 半个单词、句子等的样式

Question

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

我知道这可以通过 <h2><span>The</span> awsome title</h2> 来完成但我想知道是否有某种“第 n 个子”属性可以应用于元素内的字符。

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

欢迎使用(相对)跨浏览器解决方案。

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 来运行。