用于更改h1中最后一个单词的颜色的CSS

Question

我有一个正在使用CSS3开发的网站，并且具有h1标题标签：

<h1>main title</h1>

现在，我希望标题使用其他颜色：

<h1>main <span>title</span></h1>

所以我做：

h1 {
 color: #ddd;
}
h1 span {
 color: #333;
}

有没有一种方法 不 使用span标记，而仅在CSS中将最后一个字指定为其他颜色？

Answer 1

纯CSS不可能做到这一点。但是，您可以使用 Lettering.js 来获取::last- word选择器。 CSS-Tricks 然后，您可以执行以下操作：

h1 {
  color: #f00;
}

/* EDIT: Needs lettering.js. Please read the complete post,
 * before downvoting. Instead vote up. Thank you :)
 */
h1::last-word {
  color: #00f;
}