45

我假设这是不可能的，但以防万一或者有人有一个很好的技巧，有没有办法使用 CSS 来定位某些字符？

例如，将z段落中的所有字母设为红色，或者在我的特定情况下将vertical-align:sup所有7in 元素设置为标记为 class chord。

4

5 回答 5

33

嗨，我知道你在 CSS 中说过，但正如每个人都告诉你的那样，你不能，这是一个 javascript 解决方案，只是我的 2 美分。

最好的...

JSFiddle

css

span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p{
   font-family:Verdana;   
}

html

<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

javascript

jQuery.fn.highlight = function (str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z","highlight");

结果 在此处输入图像描述

于 2013-04-18T20:05:03.490 回答
19

这在 CSS 中是不可能的。你唯一的选择是first-letter，这不会削减它。使用 JavaScript 或（如您在评论中所述）您的服务器端语言。

于 2013-04-18T19:33:04.360 回答
0

在 CSS 中做到这一点的唯一方法是将它们包装在一个跨度中并给跨度一个类。然后针对该类的所有跨度。

于 2019-01-24T10:32:15.437 回答
0

据我了解，它仅适用于常规字符/字母。例如：如果我们想突出显示页面上的所有星号 (\u002A) 符号怎么办。$("p").highlight("u\(u002A)","highlight");在js中尝试 并插入&#42;到html中，但没有奏效。

于 2020-05-15T11:12:25.983 回答
0

回复@ncubica 但评论太长了，这是一个不使用正则表达式并且不更改除 Text 节点之外的任何 DOM 节点的版本。请原谅我的 CoffeeScript。

# DOM Element.nodeType:
NodeType =
  ELEMENT:    1
  ATTRIBUTE:  2
  TEXT:       3
  COMMENT:    8

# Tags all instances of text `target` with <span class=$class>$target</span>
#
jQuery.fn.tag = (target, css_class)->
  @contents().each (index)->
    jthis = $ @
    switch @.nodeType
      when NodeType.ELEMENT
        jthis.tag  target, css_class
      when NodeType.TEXT
        text = jthis.text()
        altered = text.replaceAll  target, "<span class=\"#{css_class}\">$&</span>"
        if altered isnt text
          jthis.replaceWith  altered

($ document).ready ->
  ($ 'div#page').tag '⚀', 'die'
于 2021-05-19T08:50:09.620 回答