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

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 是不可能的。但是，您可以使用 letting.js 来获取

::last-word

选择器。 CSS-Tricks 有一篇关于此的优秀文章：CSS-Tricks：对 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。我不会使用已接受的答案。我不认为仅仅为了更改单个标题的最后一个单词而导入整个库或插件是一个好主意，这就像“用大炮杀死错误”......相反，我会使用单个 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>

祝你好运。

Answer 3

不，没有。 CSS 中仅存在

::first-letter

和

::first-line

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

span

）。

注意：

::first-word

和

::last-word

都没有计划，至少在 选择器级别 4 规范中没有。

Answer 4

不。没有针对特定单词的选择器，请参阅

选择器级别 3：2.选择器。

您必须使用

span

 标签或运行 JavaScript 将每个单词转换为包含该单词的范围。

Answer 5

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

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

查看实例。

唯一需要注意的是

支持:last-child

Answer 6

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

Answer 7

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

Answer 8

CSS 不了解单词。唯一存在的是:first-letter 和:first-line。 像单词和最后一个伪元素这样的构造不存在。

如果您确实想在一个元素内找到一种解决方法，那么您必须使用 JavaScript 来解析最后一个单词。 我认为当页面上只有几个案例时，您采用的方法是最好的方法。

如果你将它用于 h1 那么你应该只在页面上出现一次。

Answer 9

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

Answer 10

使用 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 并检查 ，单词将被拆分，类将根据单词数量分为 word1、word2、word3 等等...

现在选择您要编辑的单词类别，并为其编写 CSS。

CSS 示例：

.word3 {color : red;}

完成！

Answer 11

这是另一种解决方法。

使用 after 伪元素创建下划线
用“width”控制下划线的宽度

示例：

.something:after 
{
    content: "";
    position: absolute;
    width: 98%;
    display: block;
    height: 2px;
    background-color: #000;
    bottom: 5px;
}

我选择了宽度

< 100% so that it fits underneath the text with the letter spacing I wanted. This solution worked well for me.

Answer 12

使用 data-text 和 :after with content: attr(data-text) ，使用普通 CSS 完全可以设置最终单词的样式，无需使用 javascript。

<h1 data-text="word">This is the final word</h1>

h1 {
  color: #154734;
}
h1:after{
    content: attr(data-text);
    color: #BD8B13;
    transform: translateX(-100%);
    position: absolute;
}

演示

Answer 13

也许使用“之后”选择器

element1
{
    properties
    main
}

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

我建议保留“span”。如果你不想有一个巨大的 css 和那些额外的东西，你总是可以在你的 html 中这样做：

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