用于改变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无法实现这一点.但是,您可以使用lettering.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

"最后一个字"不适用于每个浏览器; 例如,它不适用于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()=>上的最后一个单词

<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

不,那里没有.只有::first-letter和::first-lineCSS中存在.其他任何东西必须用元素手动完成(例如span).

注意:既::first-word没有::last-word计划,也没有计划,至少不在选择器4级规范中.