Html 如何在CSS中使用XML数据作为变量？

我想开发一种由于技术原因无法放入数据库的数据显示，因此XML似乎是目前为止我唯一的解决方案。我需要在x/y轴图形上显示元素，每个元素都可以单击并打开一个包含更多信息的div。想象一下一个水果列表，根据脆度的x轴（0-100）和绿色度的y轴（0-100）显示，然后单击可以看到营养信息、照片等（稍微有点）

XML应该是这样的：

<fruit_list>
  <fruit>
    <name>Orange</name>
    <xaxis>7</xaxis>
    <yaxis>5</yaxis>
    <description>round and orange and not crunchy</description>
  </fruit>
  <fruit>
    <name>Granny Smith apple</name>
    <xaxis>85</xaxis>
    <yaxis>90</yaxis>
    <description>round and green and crunchy</description>
  </fruit>
</fruit_list>

橙色
7.
5.
圆的，橙色的，不脆的
史密斯奶奶苹果
85
90
又圆又绿又脆

---

我希望有一种方法可以使用XML中x和y数据的值来定义CSS中元素的位置。我必须承认我对XML没有太多的经验，我只使用过它在简单的表中显示数据。有人有主意吗

这只是我的一个想法，但是您可以在x&y轴上为自定义范围使用不同的CSS类

例如，您可以定义范围90-100（x）和90-100（y）具有类

.x90-100_y90-100{
    /*Your CSS comes here...*/
}

范围90-100（x）和80-89（y）具有

.x90-100_y80-89{
    /*Your CSS comes here...*/
}

...

还有一个

然后，您可以在从XML文件创建HTML元素的函数中将这些类附加到HTML元素（JS、PHP等）

---

也许这可以帮助您：）

您需要某种中介来使用变量生成CSS。步骤1：选择一种编程语言。