如何使用css设置xml标记属性的样式

Question

我试图将样式赋予显示为页面的xml文件，到目前为止，我可以设法仅将样式赋予＆＃34; start＆＃34;标签的属性，但我需要设置另外两个属性：＆＃34; end＆＃34;和＆＃34; n＆＃34;。

目前我有：

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()。只需在中间添加一个空格即可。要添加文本，只需将其包装在引号中即可。