Html 更改最后一个字母颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15441742/
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
Change last letter color
提问by Supersharp
Example code:
示例代码：
<p class="test">string</p>
I want to change the color on the last letter, in this case "g", but I need solution with css, I don't need a javascript solution.
我想更改最后一个字母的颜色，在本例中为“g”，但我需要使用 css 的解决方案，我不需要 javascript 解决方案。
I display the string letter by letter and i cant use static solution.
我一个字母一个字母地显示字符串，我不能使用静态解决方案。
采纳答案by David Kiger
Without using javascript, your only option is:
不使用 javascript，您唯一的选择是：
<p class="test">strin<span class="other-color">g</span></p>
Edit for your fiddle link:
编辑您的小提琴链接：
I'm not really sure why you said you didn't need a javascript solution, since you have quite a bit of it already. Regardless, in this example, you need to make only a couple small changes. Change line 10 from
我不太确定你为什么说你不需要 javascript 解决方案，因为你已经有很多了。无论如何，在此示例中，您只需要进行一些小的更改。将第 10 行从
elem.text(elem.text() + contentArray[current++]);
to
到
if ( current == contentArray.length-1 ) {
elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
elem.html(elem.html() + contentArray[current++]);
}
Note that it's important to use .html()instead of .text()now, since there's actually HTML markup being inserted.
请注意，重要的是使用.html()而不是.text()现在，因为实际上插入了 HTML 标记。
Working fiddle: http://jsfiddle.net/QTUsb/2/
工作小提琴：http: //jsfiddle.net/QTUsb/2/
回答by Spudley
Everyone says it can't be done. I'm here to prove otherwise.
大家都说做不到。我是来证明其他的。
Yes, it canbe done.
是的，它可以完成。
Okay, so it's a horrible hack, but it can be done.
好吧，这是一个可怕的黑客，但它可以做到。
We need to use two CSS features:
我们需要使用两个 CSS 特性：
Firstly, CSS provides the ability to change the direction of the flow of the text. This is typically used for scripts like Arabic or Hebrew, but it actually works for any text. If we use it for English text, the letters are displayed in reverse order to how the appear in the markup. So to get the text to show as the word "String" on a reversed element, we would have to have markup that reads "gnirtS".
Secondly, CSS has the
::first-letterpseudo-element selector, which selects the first letter in the text. (other answers already established that this is available, but there's no equivalent::last-letterselector)
首先，CSS 提供了改变文本流向的能力。这通常用于阿拉伯语或希伯来语等脚本，但它实际上适用于任何文本。如果我们将它用于英文文本，则字母的显示顺序与标记中出现的顺序相反。因此，要让文本在反向元素上显示为单词“String”，我们必须具有读取“gnirtS”的标记。
其次，CSS 有
::first-letter伪元素选择器，它选择文本中的第一个字母。（其他答案已经确定这是可用的，但没有等效的::last-letter选择器）
Now, if we combine the ::first-letterwith the reversed text, we can select the first letter of "gnirtS", but it'll look like we're selecting the last letter of "String".
现在，如果我们将::first-letter与反转文本结合起来，我们可以选择“gnirtS”的第一个字母，但看起来我们正在选择“String”的最后一个字母。
So our CSS looks like this:
所以我们的 CSS 看起来像这样：
div {
unicode-bidi:bidi-override;
direction:rtl;
}
div::first-letter {
color: blue;
}
and HTML:
和 HTML：
<div>gnirtS</div>
Yes, this does work -- you can see the working fiddle here: http://jsfiddle.net/gFcA9/
是的，这确实有效——你可以在这里看到工作小提琴：http: //jsfiddle.net/gFcA9/
But as I say, it is a bit hacky. And who wants to spend their time writing everything backwards? Not really a practical solution, but it does answer the question.
但正如我所说，它有点hacky。谁愿意花时间倒着写所有东西？不是一个真正实用的解决方案，但它确实回答了这个问题。
回答by Supersharp
回答by Marc_Alx
Another solution is to use ::after
另一种解决方案是使用 ::after
.test::after{
content:"g"
color:yellow;
}
<p class="test">strin</p>
This solution allows to change the color of all characters not only letters like the answer from Spudley that uses ::first-letter. See ::first-letterspecificationfor more information. ::first-letterapplies only on letters it ignores punctuation symbols.
此解决方案允许更改所有字符的颜色，而不仅仅是像 Spudley 使用::first-letter. 有关更多信息，请参阅::first-letter规范。::first-letter仅适用于忽略标点符号的字母。
Moreover if you want to color more than the last character you can :
此外，如果你想给比最后一个字符更多的颜色，你可以：
.test::after{
content:"ing"
color:yellow;
}
<p class="test">str</p>
For more information on ::after check this link.
有关 ::after 的更多信息，请查看此链接。
回答by Jastrzebowski
It could be achieved using only CSS and an ::afterpseudo-element without any changes in HTML:
它可以仅使用 CSS 和::after伪元素来实现，而无需对 HTML 进行任何更改：
.test {
font-size: 16pt;
position: relative;
}
.test::after {
bottom: 0;
color: red;
content: 'g';
position: absolute;
transform: translate(-100%, 0);
}<p class="test">string</p>回答by Stephen P
In what way do you "display the string letter by letter"? If you're looping through the characters in a string (variable) you can certainly tell when you're at the last letter and wrap it in a whether doing so on the server side or client side.
你以什么方式“一个字母一个字母地显示字符串”？如果您循环遍历字符串（变量）中的字符，您当然可以知道何时到达最后一个字母并将其包装在服务器端或客户端是否这样做。
Looking at the fiddles attached to another of your questions...
查看附加到您的另一个问题的小提琴......
If this is what you're talking about, you might have to set the .innerHTMLof the element instead of the element.text()
如果这就是你所说的，你可能需要设置.innerHTML元素的而不是element.text()
From the fiddle at http://jsfiddle.net/SLKEn/you would change it to something like this
从http://jsfiddle.net/SLKEn/的小提琴你可以把它改成这样的
if(current < contentArray.length) {
elem.html(
elem.html() +
(current == contentArray.length-1 ?
'<span class="lastchar">' + contentArray[current++] + '</span>' :
contentArray[current++])
);
}
along with CSS span.lastchar { color: red; }
与 CSS 一起 span.lastchar { color: red; }
Update: working fiddlebased on your other question.
更新：根据您的其他问题工作小提琴。
回答by shaan gola
$(document).ready(function() {
var str=$("span").text();
strArr=str.split("");
for(var key=0;key<=strArr.length-1;key++) {
if(key==strArr.length-1) {
var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
strArr[key]=newEle;
}
}
var newtext=strArr.join("");
$("span").html(newtext);
});
span#lastElement {
color: red;
}回答by joeinfo
i dont have the ability to comment on an answer thread but i wanted to point out an error in an answer provided by Marc_Alxthat otherwise works wonderfully. that solution worked for me only after adding a semi-colon behind the contentproperty... so it looks like content:"ing";
我没有能力对答案线程发表评论，但我想指出Marc_Alx 提供的答案中的错误，否则效果很好。只有在content属性后面添加分号后，该解决方案才对我有用......所以它看起来像content:"ing";
.test::after{
content:"ing";
color:yellow;
}
<p class="test">str</p>
