html - 如何缩小括号中数字的字体大小？

Question

我有一篇带旁注的文章。该页面有两栏，一栏用于论文，另一栏用于旁注。如果一个句子有旁注，则在其后跟括号中的数字。编号是旁注编号。例如: 作文: 太阳绕着地球转。 (1) 旁注: (1) 错误!

我的目标是让所有的数字+括号变小。我假设有一个简单的 CSS 解决方案。

我应该补充一点，有 80 种不同的笔记，因此我需要一个简单、省时的解决方案。有没有一个可以让我说，“对于 n 是数字的每个 (n)，将字体设置为 8pt”？

Answer 1

如果您正在寻找纯 CSS 解决方案，那您就走运了。 CSS 无法解析文本和操作 DOM——这是 JavaScript 的工作。如果您能够手动更改标记，则可以包装您的引文，例如(1) , 带有语义元素，例如 <sup>(1)</sup>如果你想让它显示为上标，或者 <span>(1)</span>如果你想改变它的样式。鉴于您想要维基百科风格的引文，前者是可行的方法。

但是，如果您想让浏览器随时随地解析括号中的数字，仅靠 CSS 是不够的——您将不得不使用 JS。如前所述，查找此类引用的最佳方法是查找格式，例如，以下正则表达式模式可能就足够了:\(\d+\) .但是，这又取决于您希望它们如何匹配。如果您不希望它们错误地匹配到正常括号内的数字，例如在句子中或在元素符号中，您必须在它之前包含一个否定的空白字符:[^\s]\(\d+\) .

这是一个结合了 JS+CSS 的简单例子:

$(function() {
  $('p').each(function() {
    $(this).html($(this).html().replace(/[^\s](\(\d+\))/gi,'<sup>$1</sup>'));
  });
});

sup {
  color: blue;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus interdum ullamcorper, for example: (1) Suspendisse semper mattis ante, et efficitur justo tempor in; (2) Cras iaculis, magna a bibendum porta, diam massa ornare nisi, eget finibus sapien enim non elit; (3) Pellentesque ut ultrices libero.</p>

<p>Donec non velit et ante vestibulum maximus(1). Phasellus ac interdum nisi, eu iaculis massa. Proin vel sem est. Morbi euismod massa eu commodo efficitur. Phasellus vitae leo euismod, pretium turpis sit amet, bibendum elit(2). In efficitur id metus ullamcorper tristique. Integer et felis in felis suscipit tincidunt nec nec lectus.</p>

<p>Vestibulum mollis, magna sodales maximus faucibus, leo risus pretium libero, at placerat urna eros et nisl(3). Nunc cursus enim diam, in accumsan augue faucibus vel. Integer feugiat egestas lectus eu blandit. Donec ac neque turpis. Donec imperdiet feugiat purus, a congue dui convallis ut(4). Sed scelerisque ac massa non feugiat. Aliquam erat volutpat. Donec vestibulum odio id pulvinar elementum. Ut laoreet massa ac nibh pulvinar, id consequat tellus malesuada(5). Fusce porta purus diam, in luctus odio laoreet quis. Quisque condimentum condimentum felis sed rutrum. Aenean pellentesque felis in posuere efficitur. Mauris tristique ultricies massa at euismod.</p>