时间戳

首页 > 解决方案 > 有没有办法像在编辑器中一样将相同的样式应用于不同的 XML 标签/突出显示语法？

css - 有没有办法像在编辑器中一样将相同的样式应用于不同的 XML 标签/突出显示语法？

问题描述

用户可以上传xml具有不同元素的自定义文件，每个文件的外观和结构可能不同。例如：

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

或者

<file>
<name>Tove</name>
<lastname>Jani</lastname>
<title>Reminder</title>
<content>Don't forget me this weekend!</content>
</file>

如何将相同的样式应用于两个不同的xml文件？例如，将文本涂成橙色，将标签涂成蓝色。

编辑：根据BoltClock评论，我想突出显示语法本身，就像在某种编辑器中看到的那样。

标签： cssxml

解决方案

我会将所有内容包装到另一个元素（即）中，然后从那里开始：

info > *:nth-child(odd) {
  display: block;
  background: orange;
}

info > *:nth-child(even) {
  display: block;
  background: yellow;
}

info > * > *:nth-child(1) {
  display: block;
  font-weight: bold;
}

info > * > *:nth-child(2) {
  display: block;
}

info > * > *:nth-child(3) {
  display: inline-block;
  font-weight: bold;
}

info > * > *:nth-child(3):after {
  content: ' :';
}

info > * > *:nth-child(4) {
  display: inline-block;
}
<info>
  <note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
  </note>

  <file>
    <name>Tove</name>
    <lastname>Jani</lastname>
    <title>Reminder</title>
    <content>Don't forget me this weekend!</content>
  </file>
</info>

希望这可以帮助。

推荐阅读