使用 CSS 设置某些字符的样式答案

【问题标题】：Style certain characters with CSS使用 CSS 设置某些字符的样式
【发布时间】：2021-05-19 17:19:24
【问题描述】：

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

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

【问题讨论】：

用 JavaScript 处理文本并添加带有某些类的 span 元素怎么样？
没有。您需要使用 javascript 或一些预处理来添加类以跨越包装字符
在纯 CSS 中，唯一与您所询问的内容模糊相似的选择器是 :first-letter
是的，在后端做是我的后备解决方案，没问题，但如果有一个干净的 CSS 解决方案，我会更喜欢它
看起来可以通过@font-face 使用custom fonts specific to certain (unicode code-point-specified) characters，这可能很接近......并且可能与font-style 描述符结合使用，以完全满足OP 的要求。

标签： css

【解决方案1】：

您好，我知道您在 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");

结果

【讨论】：

这是一个很好的解决方案——您是否有机会更新正则表达式，使其不针对属性中的字符？它破坏了链接的 href 属性，因为链接到的 URL 中有匹配的字符。谢谢！
您是否传递了一个完整的文本块，其中包含其中的链接？
是的，当应用于段落时。看起来我通过只点击大写 V 而不是所有 v 字符来避免这个问题，并确保任何链接中都没有大写 V。我用它来收紧尴尬的字距/字母间距。
RegExp(str, "gi") 中的“gi”是什么？
我认为正则表达式在这里是一个非常脆弱的解决方案：如果您要替换的 str 恰好也出现在内部标记中怎么办？ Let's go Zapata pizza? （或者，highlight('m',…) 将匹配来自任何 em 标记等的 m）因此谚语“如果你有问题，用正则表达式解决它，你现在有两个问题”:-(

【解决方案2】：

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

【讨论】：

似乎答案是no，是的:) 我会在允许的时候接受这个。我已经在后端解析和弦，所以只需要调整输出。只是想知道是否有一种方法可以使输出保持B7 而不是B7，这是相当多的字符，只是为了设置两个字符的样式：p
@Svish 是的，它非常庞大，但你正在设计和弦，所以这永远不会是最简单的实现:)。嘿，不要让两个额外的 span 标签毁了你的和弦 :)
@Svish 因为你只有两个字母要设置样式，我想同时使用B7 和first-letter 你可以完成你想要的。
@xpy 如果所有歌曲都只包含 B7 和弦，这将起作用；) 不幸的是，7 可以在很多不同的地方，第一个字母之后的可能是，通常是，别的东西比 7 :/
我可能会大力推动这一点，但您也可以执行B7 之类的操作，您可以选择使用[data-chord]、[data-chord^=b]、[data-chord$=7] 等来设置样式的任何和弦。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

回复@ncubica 但评论太长了，这是一个不使用正则表达式并且不改变除文本节点以外的任何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'

【讨论】：