可以在<input>控件布局之外的其他嵌套级别中使用<label>吗？

Question

我想知道以下HTML / CSS是否有任何错误，主要是从可访问性的角度来看。

我有两组指令A和B。用户一次只能看到其中一条。当用户看到说明A时，应该有一个指向B的链接，反之亦然。我考虑过使用<radio>按钮及其:checked状态来控制内容的可见性，然后按钮<label>可能位于该内容内部，充当链接。由于可以单击标签来激活其相应的单选按钮，因此我将代码设置如下：

label {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.a,.b {
  display:none;
}

#a:checked ~ .content .a,
#b:checked ~ .content .b {
  display: block;
}

<input type="radio" name="options" value="a" id="a" checked>
<input type="radio" name="options" value="b" id="b">

<div class="content">
  <div class="a">
    Some text and <label for="b">Check out B</label>
  </div>
  <div class="b">
    Some other text and <label for="a">Check out A</label>
  </div>
</div>

由于这似乎很骇人听闻，所以我想您可以指出该代码可能导致的任何潜在问题。

Answer 1

我没有发现任何有关 HTML 标签标记的特定约束，这会阻止您执行已完成的操作。\nW3S HTML 标签标记页面上声明的唯一约束是其 \xc2\xabfor属性必须相等到id相关元素的属性以将它们绑定在一起。\xc2\xbb

\n\n

你观察到了它。所以应该不会有什么问题。

\n