我有一个正在使用 CSS3 开发的网站，并且我有 h1 标题标签：
<h1>main title</h1>
现在我希望标题使用不同的颜色：
<h1>main <span>title</span></h1>
所以我这样做：
h1 {
color: #ddd;
}
h1 span {
color: #333;
}
有没有办法不使用span标签并且只在CSS中指定最后一个单词为不同的颜色？
【问题讨论】：
这对于纯 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;
}
【讨论】：
.char# 模式，但没有在 CSS 中提供类似::last-word 的支持。这篇文章只是指出拥有这样的选择器是多么有用，以及 lettering.js 如何以自己（不同的）方式填补空白。
$('h1').lettering('words')，然后用h1 > span::last-child选择
"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>
祝你好运。
【讨论】：
不，没有。 CSS 中只存在 ::first-letter 和 ::first-line。其他任何事情都必须使用元素手动完成（例如span）。
注意：::first-word 和 ::last-word 都没有计划，至少在 Selectors level 4 spec 中没有。
【讨论】：
没有。没有特定单词的选择器，请参阅Selectors Level 3: 2. Selectors。
您必须使用span 标签或运行 JavaScript 将每个单词转换为包含该单词的 span。
【讨论】：
CSS 并没有真正以这种方式与文本交互。它与 DOM 树中的元素交互。在该单词周围添加一个跨度是区分一段文本的标准方法（至少我见过）。只需使用 span 标签，代码的维护者会感谢您的。
【讨论】：
接受 iblue 的回答，但更明智一点。
使用lettering.js 进行以下设置：
$(document).ready(function() {
$('h1').lettering('words');
});
这会将任何<h1> 标签拆分成类似这样的内容：
<h1>
<span class="word1">Highlight</span>
<span class="word2">the</span>
<span class="word3">last</span>
<span class="word4">word</span>
<span class="word5">a</span>
<span class="word6">different</span>
<span class="word7">color</span>
</h1>
当然，我们不能只定位.word7，因为这可能不是最后一个，所以我们可以使用:last-child CSS 伪类。
h1 {
color: #333;
}
h1 > span:last-child {
color: #c09;
}
现在最后一个词是不同的颜色。 Check out the live example.
唯一需要注意的是support for :last-child
【讨论】：
不，CSS 中没有选择器可以引用元素的最后一个（或第一个）单词。首字母和首行都有伪元素，但单词需要包装在容器中才能单独设置样式。
【讨论】：
CSS 对单词一无所知。唯一存在的是 :first-letter 和 :first-line。 不存在像单词这样的结构和 last 的伪元素。
如果您真的想在一个元素中找到解决方法，那么您必须使用 javascript 来解析最后一个单词。 当页面上只有几个案例时，我认为你的方式是最好的方式。
如果你将它用于 h1，那么你应该在页面上只使用一次。
【讨论】：
CSS 适用于元素...但通常不适用于元素内的文本或数据。不过，如果您愿意，可以使用 Javascript 来处理元素内部的实际文本。
【讨论】：
使用 lettering.js
CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
，并将此脚本添加到页脚中，用于选择元素并将其拆分为单词。
例如，
<script>jQuery('h3').lettering('words')</script>
现在，如果您检查 element 和 check ，单词将被拆分，根据单词的数量，类将出现 word1、word2、word3 等等...
现在选择您要编辑的单词类别，并为此编写 CSS。
CSS 示例：
.word3 {color : red;}
完成了！
【讨论】：
也许有“之后”选择器
element1
{
properties
main
}
element1:after
{
content: "title";
color: pickone;
}
我建议使用“span”。如果您不想拥有一个包含额外内容的巨大 CSS，您可以随时在您的 html 中执行此操作：
<span style="color:#000;">text</span>
【讨论】：