在 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;
}