39

示例代码：

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

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

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

4

8 回答 8

190

大家都说做不到。我来这里是为了证明并非如此。

是的，这是可以做到的。

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

我们需要使用两个 CSS 特性：

  • 首先，CSS 提供了改变文本流向的能力。这通常用于阿拉伯语或希伯来语等脚本，但它实际上适用于任何文本。如果我们将它用于英文文本，则字母的显示顺序与标记中的显示顺序相反。因此，要让文本在反向元素上显示为单词“String”，我们必须有标记为“gnirtS”。

  • 其次，CSS 有::first-letter伪元素选择器，它选择文本中的第一个字母。（其他答案已经确定这是可用的，但没有等效的::last-letter选择器）

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

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

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

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

和 HTML：

<div>gnirtS</div>

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

但正如我所说，这有点hacky。谁愿意把时间花在倒写一切上？这不是一个实际的解决方案，但它确实回答了这个问题。

于 2013-03-15T22:32:13.323 回答
51

使用::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>

于 2015-06-24T22:16:11.847 回答
26

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

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

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

此外，如果您想为最后一个字符着色，您可以：

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

有关 ::after 的更多信息，请查看此链接。

于 2015-09-16T09:06:23.267 回答
16

不使用 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/

于 2013-03-15T20:44:25.923 回答
10

它可以只使用 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>

于 2016-04-17T12:23:33.773 回答
1

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

看着你的另一个问题所附的小提琴......

如果这就是您所说的，您可能必须设置.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; }

更新：根据您的其他问题工作小提琴。

于 2013-03-15T21:06:28.820 回答
1 

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

于 2014-11-28T06:49:15.330 回答
0

我没有能力对答案线程发表评论，但我想指出Marc_Alx 提供的答案中的错误，否则效果很好。该解决方案仅在属性后面添加分号后才对我有用content......所以它看起来像content:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>
于 2018-11-08T16:35:01.820 回答