Html 用于更改 h1 中最后一个单词颜色的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9268386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for changing color of last word in h1
提问by Alexei
I have a website that I am developing using CSS3 and I have h1tag for the title:
我有一个使用 CSS3 开发的网站，我有h1标题标签：
<h1>main title</h1>
Now I want the title to be in a different color:
现在我希望标题采用不同的颜色：
<h1>main <span>title</span></h1>
So I do:
所以我这样做：
h1 {
color: #ddd;
}
h1 span {
color: #333;
}
Is there a way notto use the spantag and only specify in CSS the last word to be a different color?
有没有办法不使用span标签而只在 CSS 中指定最后一个单词是不同的颜色？
采纳答案by iblue
This is not possible with pure CSS. However you can use lettering.jsto get a ::last-wordselector. CSS-Trickshas an excelent article on this: CSS-Tricks: A call for nth-everything. You can then do the following:
这对于纯 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;
}
回答by javierluz
"last-word" won't work on every browser; for instance, it doesn't work with Safari. I wouldn't use the accepted answer. I don't think it's a good idea to import an entire library or plugin just to change the last word of a single title, it's like "killing a bug with a cannon"... Instead I would use a single Javascript function, and a global class. Something like this:
“last-word”不适用于所有浏览器；例如，它不适用于 Safari。我不会使用接受的答案。我不认为导入整个库或插件只是为了更改单个标题的最后一个单词是一个好主意，就像“用大炮杀死一个错误”......相反，我会使用单个 Javascript 函数，并且一个全局类。像这样的东西：
<h1>This is my awesome <span class="last-word">title</span></h1>
CSS:
CSS：
<style>
.last-word {font-weight:bold; /* Or whatever you want to do with this element */ }
</style>
Initially, you would have something like this:
最初，你会有这样的事情：
<h1 class="title">This is my awesome title</h1>
Then, you could initialize a Javascript method to change the last word on $(document).ready() =>
然后，您可以初始化一个 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>
Good luck.
祝你好运。
回答by 0b10011
No, there is not. Only ::first-letterand ::first-lineexist in CSS. Anything else must be done manually with an element (e.g. span).
不，那里没有。只有::first-letter和::first-lineCSS中存在。其他任何事情都必须使用元素手动完成（例如span）。
Note:Neither ::first-wordnor ::last-wordare planned, at least not in the Selectors level 4 spec.
注意：既::first-word没有::last-word计划也没有计划，至少在Selectors level 4 规范中没有。
回答by WolfieZero
Taking iblue's answer but making a bit more sensible.
采取 iblue 的答案，但要更明智一些。
Use lettering.jswith the following setup:
使用具有以下设置的lettering.js：
$(document).ready(function() {
$('h1').lettering('words');
});
That will split out any <h1>tag into something like so:
这会将任何<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>
Of course we can't just target .word7as that might not be the last so we can use the :last-childCSS pseudo-class.
当然，我们不能仅仅定位，.word7因为这可能不是最后一个，所以我们可以使用:last-childCSS 伪类。
h1 {
color: #333;
}
h1 > span:last-child {
color: #c09;
}
Now the last word is a different color. Check out the live example.
现在最后一个字是不同的颜色。查看现场示例。
Only thing to be careful about is support for :last-child
唯一需要注意的是支持:last-child
回答by Scott M.
CSS doesn't really interact with text in that manner. it interacts with elements in the DOM tree. Adding a span around that word is the standard way (that I've seen, at least) of differentiating a piece of text. Just use the span tag, the maintainer of the code will thank you for it.
CSS 并没有真正以这种方式与文本交互。它与 DOM 树中的元素进行交互。在该词周围添加一个跨度是区分一段文本的标准方法（至少我见过）。只要使用 span 标签，代码的维护者就会感谢你。
回答by Zeta
No. There is no selector for specific words, see Selectors Level 3: 2. Selectors.
不。没有特定词的选择器，请参阅选择器级别 3： 2. 选择器。
You have to use the spantag or run JavaScript to convert every word into a span containing that word.
您必须使用span标记或运行 JavaScript 将每个单词转换为包含该单词的范围。
回答by Jukka K. Korpela
No, there is no selector in CSS that would refer to the last (or first) word of an element. There are pseudo-elements for first letter and for first line, but words need to be wrapped in containers in order to style them separately.
不，CSS 中没有选择器会引用元素的最后一个（或第一个）单词。第一个字母和第一行都有伪元素，但是单词需要包装在容器中以便单独设置样式。
回答by summea
CSS works on elements... but generally not on the text or data inside an element. You could use Javascript, if you'd like, to work with the actual text inside of the elements, though.
CSS 适用于元素……但通常不适用于元素内的文本或数据。不过，如果您愿意，您可以使用 Javascript 来处理元素内的实际文本。
回答by Sven Bieder
CSS has no knowledge about words. The only thing existing is :first-letter and :first-line. A construct like a word and a pseudo element for last are not existing.
CSS 对单词一无所知。唯一存在的是 :first-letter 和 :first-line。像单词这样的结构和 last 的伪元素不存在。
If you really want to have a workaround within one element, then you must use javascript to parse the last word out. I think the way you are going is the best way when you only have a few cases on the page.
如果您真的想在一个元素中找到一种解决方法，那么您必须使用 javascript 来解析最后一个单词。我认为当页面上只有几个案例时，你的方式是最好的方式。
If you use it for h1 then you should have it so or so only once on the page.
如果您将它用于 h1，那么您应该只在页面上使用它一次。
回答by ramonovski
Maybe with "after" selector
也许使用“after”选择器
element1
{
properties
main
}
element1:after
{
content: "title";
color: pickone;
}
I recommend stay with "span". If you don't want to have a huge css with that extra stuff you can always do this in your html:
我建议留在“跨度”。如果你不想有一个巨大的 css 和那些额外的东西，你总是可以在你的 html 中做到这一点：
<span style="color:#000;">text</span>
