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

问题描述 投票:0回答:1

我有以下纯 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
}
html css css-selectors pattern-matching siblings
1个回答
0
投票

您可以使用

: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>

© www.soinside.com 2019 - 2024. All rights reserved.