html - XML 可以与 CSS 样式表交互吗？

Question

假设我有一个 CSS 表，其中包含有关如何显示显示系统状态的站点的信息。根据站点的状态，以下之一将是状态的属性:

#green_status 
{
    color: white;
    text-align: left;
    background: url(images/green.jpg) no-repeat;
}

#yellow_status
{
    color: white;
    text-align: left;
    background: url(images/yellow.jpg) no-repeat;
}

#red_status
{
    color: white;
    text-align: left;
    background: url(images/red.jpg) no-repeat;
}

还有一个 XML 文档，用于存储各个站点及其状态的详细信息

    <site> 
        <name>New Site</name>
        <headerImage>header image goes here</headerImage>
        <systemStatus color="green">Normal</systemStatus>
        <networkNotes>System status is normal</networkNotes>
    </site>

我将使用 XML DOM 从 XML 中选择值来填充页面元素。虽然经过一些测试后，我仍然发现我可以更改系统状态的文本，但不能更改栏的颜色，而无需实际更改站点的属性。

我希望能够只更改 XML 文件并设置 <systemStatus color"red">SYSTEM IS DOWN</systemStatus>并且不仅将文本更改，而且将栏颜色更改为“red.jpg”，而无需进入 html 并手动编辑状态。

到目前为止，为了解决这个问题，我已经将“color="green, yellow, red"' 属性添加到我的 XML 元素中，向 CSS 添加了 2 个新状态(由这个问题的第一个代码块指示), 到目前为止还无法将这些点联系起来。

有没有一种方法可以使我只需要对 XML 文件进行更改以更改该站点系统状态的文本和栏颜色？这里的最终目标是能够仅更改 systemStatus 的 XML 属性和文本。并更改网站上的栏和文本。

Answer 1

使用 CSS3 属性选择器。

<systemStatus color="green">

CSS:

systemStatus[color='green'] {
     background-color:#2f2;
}