通过css更改文本中数字的样式

Question

我有一个类似的文字（03 天 02 夜套餐，120 美元起）。无论如何，我可以仅使用 css 更改数字的样式。我知道我可以通过添加额外的 html 标签或使用 jquery 来做到这一点。一直在寻找这个很长一段时间，但找不到任何东西。任何帮助，将不胜感激。

Answer 1

使用纯 CSS 不可能只针对文本中的数字。

您唯一能做的就是仅更改数字的字体系列。

这使用unicode-range ( spec ,  MDN ) 指令。使用 Google Fonts 中的字体时，可以按如下方式使用。我在这里选择了数字和美元符号，但可以在text参数中选择任何范围的字符。

@import url('https://fonts.googleapis.com/css?family=Raleway&text=0123456789$');
@import url('https://fonts.googleapis.com/css?family=Ranga');

p {
  font-family: 'Raleway', 'Ranga', sans-serif;
}

<p>03 Days 02 Night Package, Starts from $120</p>

因为您在回答中只提到了额外的 HTML 标签和 jQuery，所以我认为向您展示如何在 vanilla JavaScript 中执行此操作可能会有所帮助。

let elementToFindDigitsIn = document.querySelector('p');
elementToFindDigitsIn.innerHTML =
    elementToFindDigitsIn
      .textContent
      .replace(/(\$?\d+)/g, '<span>$1</span>');

span {
  color: blue;
}

<p>03 Days 02 Night Package, Starts from $120</p>

事实上，正如@LGSon在评论中所提到的，通过这种方式，也可以很容易地为不同的数字提供不同的类。

let elementToFindDigitsIn = document.querySelector('p'),
    count = 0;
elementToFindDigitsIn.innerHTML =
    elementToFindDigitsIn
      .textContent
      .replace(/(\$?\d+)/g, (s) => {
        let c = `num-${++count}`;
        if (s[0] === '$') {
          c += ' money';
        }
        return `<span class="${c}">${s}</span>`;
      });

span {
  color: blue;
}

span.money {
  color: red;
}

span.num-2 {
  color: purple;
}

<p>03 Days 02 Night Package, Starts from $120</p>