根据常见的 CSS 类选择特定的 HTML 同级

Question

我有以下纯 CSS 表单，应根据单选输入的值显示表单 A 或表单 B :

<div>
  <label for="a">A</label>
  <input class="trigger" type="radio" id="a" name="formSelector" value="a" />

  <div id="a" class="hidden-content">
    <!-- Form A -->
    A
  </div>

  <label for="b">B</label>
  <input class="trigger" type="radio" id="b" name="formSelector" value="b" />

  <div id="b" class="hidden-content">
    <!-- Form B -->
    B
  </div>
</div>

这是相应的CSS代码：

div {
  display: flex;
  flex-direction: row;
}


.hidden-content {
  display: none;
}

.trigger:checked + .hidden-content {
  display: block; // Anything other than none
}

当然，只有当每个

trigger

是要显示的

hidden-content

的相邻兄弟时，这才有效。

我想知道是否可以使其工作，仅使用CSS，即使

trigger

和

hidden-content

不相邻。

我想象像下面的CSS这样的东西可能存在，

$

是兄弟姐妹的公共类，但没有指定它（一种模式匹配）。

.hidden-content {
  display: none;
}

$.trigger:checked ~ $.hidden-content {
  display: flex;
}

我更喜欢这样做，因为我有一个弹性布局，应该在第一行中显示单选和标签，并在后续行中显示所显示表单（A 或 B）的内容。 我可能会以错误的方式解决这个问题，请随意提出任何替代方案，顺便说一句，也欢迎解决此问题的任何解决方案:)

• 我尝试将

  trigger

  和

  hidden-content

  作为相邻的兄弟姐妹，如果使用相应的 CSS 属性手动正确设置

  order

  ，则可以工作，但我担心这将很难维护。
• 我尝试了基于特定 ID 的逻辑，这会导致大量重复（参见下面的代码）

#hidden-content-a, #hidden-content-b {
  display: none;
}

#trigger-a:checked ~ #hidden-content-a {
  display: block; // Anything other than none
}

#trigger-b:checked ~ #hidden-content-b {
  display: block; // Anything other than none
}

Answer 1

您可以使用

:has()

选择器：

.hidden-content{
  display: none;
}

:root:has(.trigger:checked) .hidden-content {
  display: block;
}

<div>
  <div>
    <div>
      <label><input type='checkbox' class='trigger'>show content</label>
    </div>
  </div>
</div>

<div>
  <div>
    <div class="hidden-content">Secret...</div>
  </div>
</div>