html - 用于更改 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 有一篇关于此的优秀文章:CSS-Tricks: A call for nth-everything .然后您可以执行以下操作:

h1 {
  color: #f00;
}

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