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

Answer 2

“last-word”不适用于每个浏览器;例如，它不适用于Safari。我不会使用接受的答案。我不认为导入整个库或插件只是为了改变单个标题的最后一个单词，这就像“用大炮杀死一个bug”...而是我会使用一个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（）=＆gt;

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

祝你好运。

Answer 3

不，没有。 CSS中仅存在::first-letter和::first-line。其他任何内容都必须使用元素手动完成（例如span）。

注意：计划::first-word和::last-word，至少不在Selectors level 4 spec。

Answer 4

CSS并没有真正以这种方式与文本交互。它与DOM树中的元素交互。在该单词周围添加跨度是区分一段文本的标准方式（至少我已经看到）。只需使用span标记，代码的维护者就会感谢你。

Answer 5

没有。没有特定单词的选择器，请参阅Selectors Level 3: 2. Selectors。

您必须使用span标记或运行JavaScript将每个单词转换为包含该单词的范围。

Answer 6

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

Answer 7

不，CSS中没有选择器可以引用元素的最后一个（或第一个）单词。第一个字母和第一行有伪元素，但是单词需要用容器包装才能分别设置它们。

Answer 8

CSS不了解单词。唯一存在的是：第一个字母和：第一行。像last的构造和last的伪元素都不存在。

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

如果您将它用于h1，那么您应该只在页面上使用它一次。

Answer 9

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

Answer 10

也许使用“之后”选择器

element1
{
    properties
    main
}

element1:after 
{
    content: "title";
    color: pickone;
}

我建议留在“span”。如果你不想拥有一个额外的巨大的CSS，你可以在你的html中做到这一点：

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

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

10 个答案: