html - 如何使用 css 设置 xml 标签属性的样式

Question

我正在尝试为显示为页面的 xml 文件提供样式，到目前为止，我只能设法为标记的“开始”属性提供样式，但我需要为另外两个属性设置样式:"结束”和“n”。

目前我有:

CSS:

#mtxt tok { font-size: 14pt; }
#mtxt u { display: block; text-decoration: none; margin-bottom: 10px; }
#mtxt u:before { content: attr(start); color: #999900; padding-right: 30px; font-size: 9pt; }
#mtxt l { display: block; }

xml:

<u n="1" start="00:00:23,912" end="00:00:26,540" id="u-1">
<tok id="w-1">Now we're reading from the letter of st. Paul</tok>
</u>

可视化:(某种程度上，让您或多或少地看到结果)

00:00:23,912 : 现在我们正在读圣保罗的信。保罗

我试图获得的可视化效果是下一个:

1) 00:00:23,912 - 00:00:26,540 : 现在我们正在读圣保罗的信。保罗

任何建议...谢谢

Answer 1

是这样的吗？ Demo

CSS

u:before {
  content: attr(n) ') ' attr(start) ' - ' attr(end);
  color: #999900;
  padding-right: 30px;
  font-size: 9pt;
}

你可以在里面有多个attr()。中间加个空格就行了。要添加文本，只需将其括在引号中即可。