这是我的代码
出于某种原因，我无法为 [type=radio]:checked 指定单选框。
因此，我无法在单击单选按钮时切换样式。
如果我删除 input 周围的 div 它将起作用，但我需要在它周围添加更多 div。
任何帮助将不胜感激
<html>
<head>
<style>
.regular {
color:pink;
}
#toggle-2[type=radio]:checked ~ .right-column .inner1 li.regular
{
background: gray;
color:white;
}
#toggle-1[type=radio]:checked ~ .right-column .inner1 li.premier
{
background: red;
color: lightgray;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<input type="radio" id="toggle-1" name="radio">
<input type="radio" id="toggle-2" name="radio">
</div>
<div>I'm controlled by toggle. No JavaScript!</div>
<div class="right-column">
<div class="inner1">
<div class="pink">this is a test</div>
<ul>
<li class="regular_m">a</li>
<li class="regular">b</li>
<li class="regular">c</li>
<li class="regular">d</li>
<li class="regular">e</li>
<li class="regular">f</li>
<li class="regular">g</li>
<li class="regular">h</li>
<li class="regular">i</li>
<li class="regular">j</li>
<li class="regular">k</li>
<li class="regular">l</li>
<li class="regular">m</li>
<li class="regular">n</li>
<li class="regular">o</li>
<li class="regular">p</li>
<li class="regular">q</li>
<li class="premier">r</li>
<li class="premier">s</li>
<li class="premier">t</li>
<li class="premier">u</li>
<li class="premier">v</li>
<li class="premier">w</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</div>
</div>
<div class="pink">I'm controlled by toggle. No JavaScript!</div>
<div class="black">I'm controlled by toggle. No JavaScript!</div>
</div>
</body>
</html>
最佳答案
您不能从 input 中选择 .right-column，因为它们不在同一 DOM 级别，也不在子节点上。
我只需移动复选框并删除选择器的 .right-column 部分:
<html>
<head>
<style>
.regular {
color: pink;
}
#toggle-2[type='radio']:checked ~ .inner1 li.regular {
background: gray;
color: white;
}
#toggle-1[type='radio']:checked ~ .inner1 li.premier {
background: red;
color: lightgray;
}
</style>
</head>
<body>
<div id="wrap">
<div>I'm controlled by toggle. No JavaScript!</div>
<div class="right-column">
<input type="radio" id="toggle-1" name="radio" />
<input type="radio" id="toggle-2" name="radio" />
<div class="inner1">
<div class="pink">this is a test</div>
<ul>
<li class="regular_m">a</li>
<li class="regular">b</li>
<li class="regular">c</li>
<li class="regular">d</li>
<li class="regular">e</li>
<li class="regular">f</li>
<li class="regular">g</li>
<li class="regular">h</li>
<li class="regular">i</li>
<li class="regular">j</li>
<li class="regular">k</li>
<li class="regular">l</li>
<li class="regular">m</li>
<li class="regular">n</li>
<li class="regular">o</li>
<li class="regular">p</li>
<li class="regular">q</li>
<li class="premier">r</li>
<li class="premier">s</li>
<li class="premier">t</li>
<li class="premier">u</li>
<li class="premier">v</li>
<li class="premier">w</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</div>
</div>
<div class="pink">I'm controlled by toggle. No JavaScript!</div>
<div class="black">I'm controlled by toggle. No JavaScript!</div>
</div>
</body>
</html>关于css - 无法选择 [类型 :radio] by css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53526456/