在 CSS 中使用元素的属性值作为选择器

Question

我一直在尝试创建一个交互式 SVG，其中更改某些自定义属性会更改 SVG，但我遇到了一些麻烦 - 我想通过将模式名称作为属性传递来在不同的通风系统模式之间切换，我找不到一种简单的方法来隐藏或显示这些模式的不同图标。

---

基本上问题是——有没有办法在事先不知道值是什么的情况下将元素属性的值用作选择器？

---

考虑这个 CSS 代码：

#root[Mode="some_mode"] [id=attr(Mode)] {
    /* .. style .. */
}

这个 SVG 代码：

<g id="root" Mode="some_mode">
    <g id="mode1" />
    <g id="mode2" />
    <!-- and so on -->
</g>

这似乎是最明显和合乎逻辑的方法，但它不起作用，所以我采用了一种 hacky 方法来做到这一点：

#root[Mode="standby"] #standby { visibility: visible; }
#root[Mode="comfort"] #comfort { visibility: visible; }
#root[Mode="economy"] #economy { visibility: visible; }
/* and so on for every mode that I have */

我知道这可以使用 JS 来完成，但诀窍是这个 SVG 必须是无 JS 的（它适用于将 SVG 用于自定义图形的 SCADA 系统）。

在此先感谢您的帮助！

Answer 1

由于 CSS 是声明式的，我认为正确（尽管冗长）的方法确实是：

[Mode="standby"] #standby,
[Mode="comfort"] #comfort,
[Mode="economy"] #economy {
  visibility: visible;
}