如何仅用CSS实现点击单选按钮时修改文本字体粗细？

你的问题出在CSS选择器的使用上：你用了相邻兄弟选择器+，它只能匹配紧跟在目标元素之后的第一个相邻元素，但#content和选中的单选按钮之间隔了label和另一个单选按钮，所以无法触发样式变化。

这里提供两种纯CSS解决方案：

方案1：使用通用兄弟选择器（推荐，兼容性好） #

通用兄弟选择器~可以匹配同一父元素下，目标元素之后的所有兄弟元素，不管中间有没有其他元素。修改你的CSS代码：

#content {
  color: #333;
  font-weight: 700;
}

.radio_item_menu:checked ~ #content {
  font-weight: 300;
}

这样只要任意一个单选按钮被选中，#content的字体粗细就会变为300。

方案2：使用:has()选择器（现代浏览器支持） #

如果需要更灵活的结构控制，可以用CSS的:has()选择器，它允许你基于子元素的状态来设置父元素的样式。

首先给所有元素套一个容器：

<div class="menu-container">
  <input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
  <label for="input_description" class="label_item_menu">Description</label>
  <input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
  <label for="input_shipping" class="label_item_menu">Shipping</label>

  <div id="content"><p class="testo_scheda">
  This is some text</p>
  </div>
</div>

然后修改CSS：

#content {
  color: #333;
  font-weight: 700;
}

.menu-container:has(.radio_item_menu:checked) #content {
  font-weight: 300;
}

这种方式不受元素位置的限制，即使后续调整HTML结构，只要#content在容器内就能生效。

内容的提问来源于stack exchange，提问作者Prajwal_Surendra