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

Question

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

 <h1>main title</h1>

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

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

所以我这样做：

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

有没有办法 不 使用 span 标签，只在 CSS 中将最后一个词指定为不同的颜色？

原文由 Alexei 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

原文由 iblue 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

“last-word”并非在所有浏览器上都有效；例如，它不适用于 Safari。我不会使用公认的答案。我不认为导入整个库或插件只是为了更改单个标题的最后一个词是个好主意，这就像“用大炮杀死一个错误”……相反，我会使用单个 Javascript 函数，并且一个全局类。是这样的：

 <h1>This is my awesome <span class="last-word">title</span></h1>

CSS：

 <style>
    .last-word {font-weight:bold; /* Or whatever you want to do with this element */ }
</style>

最初，你会有这样的事情：

 <h1 class="title">This is my awesome title</h1>

然后，您可以初始化一个 Javascript 方法来更改 $(document).ready() 上的最后一个字 =>

 <script>
    $(document).ready(function() {
        $('.title').each(function(index, element) {
            var heading = $(element);
            var word_array, last_word, first_part;

            word_array = heading.html().split(/\s+/); // split on spaces
            last_word = word_array.pop();             // pop the last word
            first_part = word_array.join(' ');        // rejoin the first words together

            heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join(''));
        });
    });
</script>

祝你好运。

原文由 javierluz 发布，翻译遵循 CC BY-SA 3.0 许可协议