html - 如何集中定义和更改出现在整个 HTML/CSS 文档中的符号？

Question

我有一个包含一些数据的 HTML 文档，如下所示:

00000-00001
00020-00002
00000-00003

目前，- 设置为分隔符，但将来我可能想将其更改为其他符号，例如|，因此文档显示像这样:

00000|00001
00020|00002
00000|00003

我习惯于使用 TeX，这很容易实现:

\def\delimiter{-}
00000\delimiter 00001
00020\delimiter 00002
00000\delimiter 00003

在 HTML 或 CSS2 中是否有任何方法可以定义一个符号，该符号随后会出现在整个文档中，但随后可以轻松地在出现的任何地方更改该符号？

Answer 1

您可以使用 CSS2 轻松做到这一点。

<div class="left">12345</div><div>67890</div>
<div class="left">67890</div><div>12345</div>
<div class="left">12345</div><div>67890</div>
<div class="left">67890</div><div>12345</div>
<div class="left">12345</div><div>67890</div>

CSS 足以修饰左侧的 div，使其保持在左侧并在它和下一个 div 之间放置一个连字符。

.left {
    display: block;
    float: left;
}
.left:after {
    content: "-"
}

当您选择文本时，您不会得到分隔符。这是我所知道的使用这种技术的唯一缺点。

看看这个 jsfiddle .

更新

如果你想用 span 做同样的事情，我就是这样做的:

HTML

<span class="left">12345</span><span class="right">67890</span>
<span class="left">67890</span><span class="right">12345</span>
<span class="left">12345</span><span class="right">67890</span>
<span class="left">67890</span><span class="right">12345</span>
<span class="left">12345</span><span class="right">67890</span>

CSS

.left:after {
    content: "-";
}
.right:after {
    display: block;
    content: " ";
}

要获得正确的跨度以移动到下一行，您必须有一些内容(在本例中为空格)，否则显示命令将被忽略。