用于更改 h1 中最后一个单词颜色的 CSS [英] CSS for changing color of last word in h1

问题描述

我有一个使用 CSS3 开发的网站，标题有 h1 标签:

I have a website that I am developing using CSS3 and I have h1 tag for the title:

<h1>main title</h1>

现在我希望标题使用不同的颜色:

Now I want the title to be in a different color:

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

所以我这样做:

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

有没有办法不使用 span 标签并且只在 CSS 中指定最后一个单词为不同的颜色?

Is there a way not to use the span tag and only specify in CSS the last word to be a different color?

推荐答案

这在纯 CSS 中是不可能的.但是，您可以使用 lettering.js 来获取 ::last-word 选择器.CSS-Tricks 有一篇关于此的优秀文章:CSS-技巧:号召第n个一切.然后您可以执行以下操作:

This is not possible with pure CSS. However you can use lettering.js to get a ::last-word selector. CSS-Tricks has an excelent article on this: CSS-Tricks: A call for nth-everything. You can then do the following:

h1 {
  color: #f00;
}

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

这篇关于用于更改 h1 中最后一个单词颜色的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！