html - 基于所选单选按钮和元素类的 CSS 选择器

Question

考虑以下 HTML 结构:

<input type=radio name=picker value=foo> <input type=radio name=picker value=bar> etc
<ul>
    <li class=foo>Foo #1</li>
    <li class=bar>Bar #1</li>
    <li class=foo>Foo #2</li>
    <li class=bar>Bar #2</li>
</ul>

我想为那些与当前选定的单选按钮相匹配的列表项设置样式。如果所有可能的单选按钮值都是硬编码的，则此方法有效:

input:checked[value=foo] ~ ul li[class~=foo] {
    background: blue;
    color: white;
}

input:checked[value=bar] ~ ul li[class~=bar] {
    background: blue;
    color: white;
}

有没有办法先说“input:checked”然后说“li[class~=[当前选择的输入的值]]”？假设单选按钮和列表项都是动态生成的。

如果一切都失败了，我也可以动态生成 CSS，但这似乎不太理想。

Answer 1

这似乎是 CSS 的基本限制(截至 2019 年 - 如果将来发生变化，有人可以发布不同的答案)。由于无论如何都必须通过脚本生成输入控件，因此通过脚本生成 CSS 也是最简单的。