使用CSS样式化特定字符

Question

使用CSS样式化特定字符

css

54

我假设这是不可能的，但如果有人知道或者有什么诀窍，请告诉我，是否有一种使用CSS来定位特定字符的方法？

例如，将段落中所有字母z变为红色，或者在标记为chord类的元素中设置vertical-align:sup以适用于所有7。

- Svish

用JavaScript处理文本，添加一些带有类名的span元素，怎么样？ - toniedzwiedz

不行，你需要使用JavaScript或某些预处理来为包装在span中的字符添加类。 - Kai Qing

在纯 CSS 中，唯一与您所要求的相似的选择器是 :first-letter。 - FelipeAls

是的，后端实现是我的备选方案，这样做可以，但如果有一个干净的CSS解决方案会更好。 - Svish

看起来可以通过 @font-face 使用特定于某些（Unicode代码点指定的）字符的自定义字体，这可能是接近 OP 所需求的，并且可能结合 font-style 描述符来实现完全符合 OP 需求的效果。 - ijoseph

6个回答

23

这在 CSS 中是不可能的。你唯一的选择是使用 ::first-letter，但那并不够用。要么使用 JavaScript，要么（如你在评论中所述）使用服务器端语言。

- mattytommo

1

似乎答案是“不行”，是的 :) 当我被允许时，我会接受这个答案。我已经在后端解析和调整输出中的和弦了。只是想知道是否有一种方法可以保持输出为B7而不是B7，因为这样做需要很多字符来设置两个字符的样式 :p - Svish

@Svish 是的，这很繁重，但你正在为和弦设计样式，所以这永远不会是最直接的事情 :). 嘿，别让几个额外的 span 标签毁了你的和弦 :) - Mathew Thompson

@xpy 如果所有的歌曲都只由B7和弦组成，那么这个方法是可行的；）不幸的是，7可以出现在很多不同的位置，并且第一个字母后面跟着的可能是其他东西，通常也确实是如此:/ - Svish

那看起来相当痛苦 :p - Svish

有没有剩余的字母？ - Joshua Moore

显示剩余2条评论

1

作为对 @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'

- Neil Stockbridge

CoffeeScript是最好的JavaScript，毫不可耻！ - Anatoliy Arkhipov

1

唯一的在CSS中实现此功能的方法是将它们包装在一个span中，并给该span一个类。然后针对具有该类的所有span进行目标定位。

- Boy Buysman

0

据我所了解，它只能处理常规字符/字母。例如：如果我们想在页面上突出显示所有星号（\u002A）符号。尝试在js中使用$("p").highlight("u\(u002A)","highlight");并在html中插入*，但它没有起作用。

- ratigumashvili

0

许多人提到：“在CSS中不可能实现这个功能。”，而与jQuery代码相比，纯JavaScript代码通常更快且使用的资源更少。

纯JavaScript解决方案

const paragraphs = document.getElementsByTagName("p");
const substringToHighlight = "sz"; // the substring to be highlighted
const regex = new RegExp(substringToHighlight, "gi");
for (let i = 0; i < paragraphs.length; i++) {
  const paragraph = paragraphs[i];
  const text = paragraph.innerHTML;
  const newText = text.replace(regex, (match) => {
    return `<span class="highlight">${match}</span>`;
  });
  paragraph.innerHTML = newText;
}

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

p {
    font-family: 'BeingHumannormalhuman';
    font-weight: normal;
    font-style: normal;
}

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/being-human" type="text/css"/>

<p>
    Let's go Szeklers let's do it for the freedom of Szeklerland!!!
</p>

- eapo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ncubica · Accepted Answer

嗨，我知道你说的是CSS，但正如其他人告诉你的那样，你无法在CSS中实现。这是一个JavaScript解决方案，仅供参考。

祝好...

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

结果 enter image description here