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

我假设这是不可能的，但为了以防万一，或者有人有一个很好的把戏，有没有一种方法可以使用CSS来针对特定的角色

---

例如，将段落中的所有字母

z

设置为红色，或者在我的特殊情况下，在所有

7

元素上设置

vertical align:sup

，这些元素在CSS中是不可能的。你唯一的选择是，这不会减少它。要么使用JavaScript，要么（如您在评论中所述）使用您的服务器端语言。

嗨，我知道您是用CSS说的，但正如每个人告诉您的，您不能，这是一个JavaScript解决方案，只有我的2美分

最好的

css

html

我们走吧，萨帕塔，为了革命，萨帕塔斯！！！

javascript

jQuery.fn.highlight=函数（str，className）{
var regex=新的RegExp（str，“gi”）；
返回此。每个（函数（）{
this.innerHTML=this.innerHTML.replace（正则表达式，函数（匹配）{return”“+matched+”“；}）；
});
};
$（“p”）。突出显示（“Z”，“突出显示”）；

结果

---

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

据我所知，它只适用于常规字符/字母。例如：如果要突出显示页面上的所有星号（\u002A）符号，该怎么办。尝试

---

突出显示（“u\（u002A）”，“突出显示”）并插入

*但不起作用。
在回复@ncubica时，这里有一个版本，它不使用正则表达式，也不改变除文本节点以外的任何DOM节点。请原谅我的咖啡脚本

# 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'

#DOM Element.nodeType:
节点类型=
要素：1
属性：2
正文：3
评论：8
#用$target标记文本“target”的所有实例
#
jQuery.fn.tag=（目标，css_类）->
@目录（）。每个（索引）->
jthis=$@
开关@.节点类型
当NodeType.ELEMENT
jthis.tag目标，css_类
当NodeType.TEXT
text=jthis.text（）
已更改=text.replaceAll目标“$&”
如果不是文本
jthis.replacement
（$document）.就绪->
（$‘div#page'）。标记'⚀', '死
用JavaScript处理文本，并用一些类添加
span
元素怎么样？不。你需要使用JavaScript或一些预处理来为span包装字符添加类。在纯CSS中，唯一一个与你要求的类似的选择器是
：第一个字母
是的，在后端执行此操作是我的回退解决方案，这是可以的，但是如果有一个干净的CSS解决方案，我会更喜欢它。看起来可以通过
@font-face
使用，这可能很接近。。。并可能与
字体样式
描述符结合，以完全满足OP的要求。答案似乎是
否
，是：）如果允许，我会接受。我已经在后端解析和弦了，所以只需要调整输出。我只是想知道是否有一种方法可以将输出保持为
B7
，而不是
B7
，这是一个相当多的字符，仅用于设置两个字符的样式：p@Svish是的，它非常强大，但是你正在设计和弦的样式，所以这永远不会是最简单的事情：）。嘿，不要让两个额外的
span
标签破坏了你的和弦：）@Svish因为你只有两个字母要设计，我想同时使用
B7
和
第一个字母可以实现你想要的。@xpy如果所有的歌曲都只有B7和弦，那就行了；）不幸的是，7可能在很多不同的地方，第一个字母后面的东西可能是，而且通常是，7以外的东西：/我可能会经常推这一点，但是，你也可以做一些类似于
B7
的事情，你可以选择任何和弦与
[data chord]
，
[data chord^=b]
，
[数据弦$=7]
，等等。这是一个很好的解决方案–您是否有可能更新正则表达式，使其不以属性中的字符为目标？它正在破坏链接的href属性，因为链接到的URL中有一个匹配的字符。谢谢！您是否传递了一个完整的文本块，其中包含链接？是的，当应用于段落时。L像我这样的书避免了这个问题，只使用大写V而不是所有的V字符，并确保任何链接中都没有大写V。我用它来收紧笨拙的紧排/字母间距。RegExp（str，“gi”）中的“gi”是什么？我认为正则表达式在这里是一个非常脆弱的解决方案：如果您要替换的str碰巧也出现在内部标记中，该怎么办？
让我们去Zapata pizza吧？
（或者，
突出显示（'m'，…）
，它将匹配任何
em
标记等中的
m
），这就是格言“如果您有问题，并使用regexps解决，您现在有两个问题：”-(
<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

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");

# 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'