Question

示例代码：

<p class="test">string</p>

我想更改最后一个字母的颜色，在本例中为“g”，但我需要使用css解决方案，我不需要javascript解决方案。

我逐个字母地显示字符串，我不能使用静态解决方案。

Answer 1

每个人都说无法做到。我在这里证明不是。

是的，可以完成。

好的，所以这是一个可怕的黑客，但它可以做到。

我们需要使用两个CSS功能：

首先，CSS提供了改变文本流方向的能力。这通常用于阿拉伯语或希伯来语等脚本，但它实际上适用于任何文本。如果我们将它用于英文文本，则字母的显示顺序与标记中的显示方式相反。因此，要使文本在反转元素上显示为单词“String”，我们必须使用标记为“gnirtS”。
其次，CSS有::first-letter伪元素选择器，它选择文本中的第一个字母。（其他答案已经确定，这是可用的，但没有等效的::last-letter选择器）

现在，如果我们将::first-letter与反向文本结合起来，我们可以选择“gnirtS”的第一个字母，但看起来我们正在选择“字符串”的最后一个字母。

所以我们的CSS看起来像这样：

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

和HTML：

<div>gnirtS</div>

是的，这确实有效 - 你可以在这里看到工作小提琴：http://jsfiddle.net/gFcA9/

但正如我所说，这有点骇人听闻。谁愿意花时间把所有东西都倒退？这不是一个实际的解决方案，但它确实回答了这个问题。

Answer 2

使用::after伪元素与attr()函数结合使用：

p::after {
    content: attr(data-end) ;
    color: red ;
}
<p data-end="g">Strin</p>

p::after {
  content: attr(data-end) ;
  color: red ;
}

<p data-end="g">Strin</p>

Answer 3

另一种解决方案是使用::after

.test::after{
 content:"g"
 color:yellow;
}
<p class="test">strin</p>

此解决方案允许更改所有字符的颜色，而不仅仅是像Spudley使用::first-letter的答案那样的字母。有关详细信息，请参阅::first-letter specification。 ::first-letter仅适用于忽略标点符号的字母。

此外，如果你想要比最后一个角色更多颜色：

.test::after{
  content:"ing"
  color:yellow;
}
<p class="test">str</p>

有关::查看此link后的更多信息。

Answer 4

不使用javascript，您唯一的选择是：

<p class="test">strin<span class="other-color">g</span></p>

编辑您的小提琴链接：

我不确定你为什么说你不需要一个javascript解决方案，因为你已经有很多它了。无论如何，在此示例中，您只需进行一些小的更改。从

更改第10行

elem.text(elem.text() + contentArray[current++]);

到

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

请注意，现在使用.html()代替.text()非常重要，因为实际上已插入HTML标记。

工作小提琴：http://jsfiddle.net/QTUsb/2/

Answer 5

只使用CSS和::after伪元素就可以实现，而不会对HTML进行任何更改：

＆＃13;

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}

＆＃13;

<p class="test">string</p>

＆＃13;

Answer 6

你以什么方式“逐个字母地显示字符串”？如果您循环遍历字符串（变量）中的字符，您当然可以告诉您何时在最后一个字母处，并将其包装在服务器端或客户端是否这样做。

查看another of your questions附带的小提琴......

如果您正在谈论这个问题，则可能需要设置元素的.innerHTML而不是element.text()

来自http://jsfiddle.net/SLKEn/的小提琴，你会把它改成像这样的东西

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

以及CSS span.lastchar { color: red; }

根据您的其他问题更新：working fiddle。

Answer 7

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

Answer 8

我没有能力在答案线程上发表评论，但我想指出answer provided by Marc_Alx中的错误，否则它会很好地工作。只有在content属性后面添加了分号之后，该解决方案才对我有用...看起来像content:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>

改变最后的字母颜色

8 个答案: