基于选定单选按钮和元素类的 CSS 选择器答案

【问题标题】：CSS selectors based on selected radio button and element class基于选定单选按钮和元素类的 CSS 选择器
【发布时间】：2019-12-02 13:25:38
【问题描述】：

考虑以下 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~=[the value of the current-selected input]]”？假设单选按钮和列表项都是动态生成的。

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

【问题讨论】：

你试过了吗stackoverflow.com/questions/1431726/…
@Awais 是的，这不仅仅是简单的同级选择器所能做到的。
解决了你的问题吗
你不能用 CSS 做到这一点
如果下一个兄弟选择器不能解决您的问题（如第一条评论中的链接），您应该尝试使用 javascript

标签： html css

【解决方案1】：

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

【讨论】：