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

我有一个使用CSS3开发的网站，我有

h1

标签作为标题：

<h1>main title</h1>

---

有没有办法不使用

span

标记，只在CSS中指定最后一个单词为不同的颜色？

CSS对元素有效。。。但通常不在元素内的文本或数据上。如果您愿意，您可以使用Javascript处理元素内部的实际文本。

CSS实际上并没有以这种方式与文本交互。它与DOM树中的元素交互。在单词周围加一个空格是区分一段文字的标准方法（至少我见过）。只需使用span标记，代码的维护者就会为此感谢您。

否。没有特定单词的选择器，请参阅

---

您必须使用

span

标记或运行JavaScript将每个单词转换为包含该单词的span。

否，CSS中没有引用元素最后（或第一个）单词的选择器。第一个字母和第一行都有伪元素，但单词需要包装在容器中才能单独设置样式。

不，没有。CSS中只存在

：：第一个字母

和

：：第一行

。任何其他操作都必须使用元素手动完成（例如

span

）

---

注意：无论是

：：第一个单词还是
：：最后一个单词都不是计划好的，至少不是计划好的。
CSS对单词一无所知。唯一存在的是：第一个字母和：第一行。
像单词和最后一个伪元素这样的构造是不存在的

如果您真的想在一个元素中找到解决方法，那么必须使用javascript解析出最后一个单词。
我认为你的方式是最好的方式，当你只有几个案件的网页上

如果您将其用于h1，那么您应该在页面上只使用一次左右。
可能使用“after”选择器

我建议继续使用“span”。如果你不想有一个巨大的css和额外的东西，你可以在你的html中这样做：

<span style="color:#000;">text</span>

文本
这在纯CSS中是不可能的。但是，您可以使用获取
：：last word
选择器CSS技巧有一篇关于这方面的优秀文章：。然后，您可以执行以下操作：

h1 {
  color: #f00;
}

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

“最后一句话”不会在每个浏览器上都起作用；例如，它不适用于Safari。我不会用公认的答案。我认为导入整个库或插件只是为了更改单个标题的最后一个字不是一个好主意，就像“用大炮杀死一个bug”。。。相反，我将使用一个Javascript函数和一个全局类。大概是这样的：

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

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

这是我最棒的标题

CSS:


.last word{font-weight:bold；/*或您想对该元素执行的任何操作*/}

最初，您会有如下内容：

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

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

这是我最棒的标题

然后，您可以初始化一个Javascript方法来更改$（document.ready（）=>


$（文档）.ready（函数（）{
$（'.title'）。每个（函数（索引，元素）{
变量标题=$（元素）；
变量字数组，最后一个字，第一个部分；
word_array=heading.html（）.split（//\s+/）；//在空格上拆分
last_word=word_array.pop（）；//弹出最后一个单词
first_part=word_array.join（“”）；//将第一个单词重新连接在一起
heading.html（[first_part'，last_word'，].join（“”））；
});
});

祝你好运。
接受伊布卢的答案，但要做得更明智一点

与以下设置一起使用：

$(document).ready(function() {
    $('h1').lettering('words');
});

这会将任何
标记拆分为如下内容：

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

现在最后一个词是不同的颜色

唯一需要注意的是
否。您必须明确指定span元素，因为默认情况下，如果未指定更具体的选择器，则子元素将从父元素继承样式属性。：：last word对我不起作用。这就是我投反对票的原因。在哪个浏览器中它对你有用？你需要使用letting.js，答案中有链接。它应该适用于所有浏览器。如果没有，请向创建者报告一个bug。这不应该被标记为可接受的答案，因为它是完全错误的。如果我没有弄错的话，插件只是在字母中添加了一个
.char#
模式，但没有提供类似CSS中的
：：last word
-的支持。这篇文章只是指出有这样的选择器是多么有用，以及lettering.js是如何以自己（不同）的方式填补这一空白的。这个答案是错误的。正确的用法是
$（'h1'）。字母（'words'）
，然后用
h1>选择span:：last child
这个问题的答案也很有用。我编辑了我的答案，现在即使有多个.title元素也可以。对我来说效果很好。如果span和h1之间有空格，可能会造成麻烦。
$(document).ready(function() {
    $('h1').lettering('words');
});

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

h1 {
    color: #333;
}

h1 > span:last-child {
    color: #c09;
}