使用CSS选择器精准控制radio按钮选中后其他元素的样式

要精准控制radio按钮选中后其他元素的样式，可以使用CSS的:checked伪类和相邻兄弟选择器(+)或通用兄弟选择器(~)。以下是几种实现方法：

方法1：使用相邻兄弟选择器(+)

<input type="radio" id="option1" name="options">
<label for="option1">选项1</label>
<div class="content">这是选项1的内容</div>

/* 隐藏radio按钮 */
input[type="radio"] {
  display: none;
}

/* 选中时改变label样式 */
input[type="radio"]:checked + label {
  color: red;
  font-weight: bold;
}

/* 选中时显示相关内容 */
input[type="radio"]:checked + label + .content {
  display: block;
}

方法2：使用通用兄弟选择器(~)

当目标元素不是直接相邻时：

<input type="radio" id="option2" name="options">
<label for="option2">选项2</label>
<p>一些描述文字</p>
<div class="content">这是选项2的内容</div>

input[type="radio"]:checked ~ .content {
  display: block;
  background-color: #f0f0f0;
}

方法3：使用父容器和:has()选择器（较新浏览器支持）

<div class="radio-group">
  <input type="radio" id="option3" name="options">
  <label for="option3">选项3</label>
  <div class="content">这是选项3的内容</div>
</div>

.radio-group:has(input[type="radio"]:checked) .content {
  display: block;
  border: 1px solid blue;
}

方法4：使用CSS变量和JavaScript联动

对于更复杂的情况：

<input type="radio" id="option4" name="options" onchange="document.documentElement.style.setProperty('--radio-checked', '1')">
<label for="option4">选项4</label>
<div class="content">这是选项4的内容</div>

:root {
  --radio-checked: 0;
}

.content {
  opacity: var(--radio-checked);
  transition: opacity 0.3s;
}

注意事项

1. 确保radio按钮有相同的name属性才能形成互斥组
2. 使用label的for属性关联radio按钮，提高可访问性
3. 考虑使用CSS预处理器（如Sass/Less）简化复杂的选择器
4. 对于旧版浏览器，可能需要JavaScript作为备用方案

这些方法可以灵活组合使用，根据实际布局需求选择最合适的方案。