使用无线电显示/隐藏内容，无需使用Javascript

Question

我正在尝试仅使用 CSS 和单选按钮来显示/隐藏一些内容。我在 Stack Overflow 上发现了一些可以解决问题的东西 https://jsfiddle.net/LLornfn8/

但是，我需要将收音机包装在一些 div 中来处理一些常规样式，这意味着原始的 JSFiddle 代码会中断，例如：

#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping  {
    display: block;
}

#contentDescription, #contentShipping{
  display: none;
}

.radio_item_menu:checked + .label_item_menu {
  font-weight: bold;
}

<div id="radioGroup">
 <div class="myRadioStyle">
  <input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
  <label for="input_description" class="label_item_menu">Description</label>
 </div>
 <div class="myRadioStyle">
  <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>
</div>

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

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

我对像~这样的选择器不太熟悉。我想知道是否还有办法可以实现此功能？

我在 Stack Overflow 上环顾四周，发现了一些类似的东西，但它们似乎都像原始示例一样处理它，而不是对象以不同的方式嵌套。我尝试过使用不同的选择器来尝试定位隐藏的 div，但我仍然无法让它工作。当您做出选择时，不会显示任何内容。

Answer 1

对于您实际的 HTML 结构，伪类

:has()

会很有帮助，不幸的是它还没有很好地实现。 Firefox 此时失败。 https://developer.mozilla.org/en-US/docs/Web/CSS/:有

这里是在 Firefox 以外的其他地方进行测试的理论示例 （在此代码段下方，另外两个代码段在需要修改 HTML 的地方工作 - 最后一个代码段应该是您要查找的内容）

#radioGroup:has(#input_description:checked ) ~ #contentDescription, #radioGroup:has(#input_shipping:checked )~ #contentShipping  {
    display: block;
}

#contentDescription, #contentShipping{
  display: none;
}

.radio_item_menu:checked + .label_item_menu {
  font-weight: bold;
}

<div id="radioGroup">
 <div class="myRadioStyle">
  <input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
  <label for="input_description" class="label_item_menu">Description</label>
 </div>
 <div class="myRadioStyle">
  <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>
</div>

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

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

对于 Firefox 和旧版浏览器，输入需要与要隐藏的元素（或其父元素）相邻（并且在流程中位于前面）

所以对于 Firefox 来说，这时候你需要将输入放在它们的容器之外，这样它们就与要隐藏的元素相邻，或者至少是这些元素的父元素。

Firefox 版本可能是

#input_description:checked~#contentDescription,
#input_shipping:checked~#contentShipping {
  display: block;
}

#contentDescription,
#contentShipping {
  display: none;
}

.radio_item_menu:checked+.label_item_menu {
  font-weight: bold;
}

<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<br>
<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="contentDescription">
  <p class="testo_scheda">
    This is some text</p>
</div>

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

另一种选择也可以是仅在外部获取输入，并从附加到标签的伪变量重新创建它们

这是保存容器的另一种选择

#input_description:checked ~ #contentDescription , 
#input_shipping:checked ~ #contentShipping  {
    display: block;
}

#contentDescription, #contentShipping{
  display: none;
}

.radio_item_menu:checked + .label_item_menu {
  font-weight: bold;
}

/* hide the radios and create fake ones */
[type="radio"] {display:none;}
label {display:inline-block;}

.label_item_menu:before {
  content:'';
  display:inline-block;
  width:10px;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid;
  vertical-align:middle;
  margin:0 3px;
  color:#555;
}
#input_description:checked ~ #radioGroup [for="input_description"]:before , 
#input_shipping:checked ~ #radioGroup [for="input_shipping"]:before {
    color:blue;
  background: radial-gradient(circle at 50%,  blue 50%,  transparent 50%);
}

<!-- hidden radios , adjacent to content to toggle -->
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<!-- end adjacent hidden radios -->

<div id="radioGroup"><!-- fake radios drawn aside labels with a pseudo , requires to be styled -->
  <div class="myRadioStyle">
    <label for="input_description" class="label_item_menu">Description</label>
  </div>
  <div class="myRadioStyle">
    <label for="input_shipping" class="label_item_menu">Shipping</label>
  </div>
</div>

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

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