Html 标签是否可以与其控制的表单元素分开放置？

CSS技巧记录了一种叫做的东西，其中元素的样式根据复选框是否被选中而定。通过设置

元素的样式，使其显示为链接或按钮，并在单击时切换文档元素的样式，可以使用此功能

在提供的示例中，复选框紧跟在描述它的标签之后，这是我通常在紧跟在前面、紧跟在后面或封装它所控制的表单元素中看到的标签的配置

但是，在我的特定用例场景中，我需要复选框的状态来跨多个DOM节点设置多个元素的样式。由于CSS没有父选择器，并且复选框的状态与它控制的所有元素的样式密切相关，因此我认为有必要使用相关的CSS选择器，例如

~

或

+

来设置元素的样式。这需要将复选框放置在包含其标签的DOM节点之外：

/*复选框破解*/
输入[类型=复选框]{
位置：绝对位置；
顶部：-9999px；
左：-9999px；
}
标签{
光标：指针；
}
/*默认状态*/
div{
背景：绿色；
宽度：400px；
高度：100px；
线高：100px；
颜色：白色；
文本对齐：居中；
}
/*切换状态*/
输入[类型=复选框]：选中~div标签{
颜色：红色；
}
输入[类型=复选框]：选中~div div{
背景色：红色；
}

切换！
第二个要素

我的问题是关于有效性。是否可以放置

对于远离该元素本身的表单元素，即使在 同一个DOM节点

对

这样做是否会导致可用性问题 那么

没有

看

允许的父元素接受语法内容的任何元素

---

用于
与标签元素位于同一文档中的可标签表单相关元素的ID。文档中的第一个这样的元素 如果ID与for属性的值匹配，则标记为 此标签元素的控件

也请注意

表单

HTML5

标签元素关联的表单元素（其表单所有者）。如果指定，则必须指定该属性的值 是同一文档中

元素的ID。这个属性 允许您将标签元素放置在文档中的任何位置，而不是 就像它们的形式元素的后代一样

将表单元素的

放置在远离该元素本身的地方，甚至在同一DOM节点之外，是否可以接受

您的HTML根据验证为有效的HTML5

根据，只要

标签

元素的for属性值是同一文档中的a的ID，它就似乎是有效的

从中：

可以指定属性的

，以指示要与标题关联的表单控件。如果指定了该属性，则该属性的值必须是与
标签
元素在同一文档中的ID。如果指定了属性，并且文档中有一个元素的ID等于

属性的

值，并且第一个这样的元素是a，那么该元素就是
标签
元素的标签控件

示例中的
标签
元素与同一文档中的
输入
元素显式关联，并且HTML进行验证，因此它是可接受的。中还提供了一个示例，其中
标签
元素和相应的
输入
元素出现在同一DOM节点之外

此外，如果多个
标签
元素与相同的
输入
元素附加了
for
属性，则也可以将它们与相同的
输入
元素相关联。发件人：

通过属性创建多个引用，可以将多个控件与同一控件关联

可能还值得一提的是
元素只能包含，不能包含后代
元素


这样做是否会导致可用性问题

我在移动设备上看到过这样的问题：
标签
元素没有通过触摸事件检查/激活相应的
输入
元素，除非
用户选择：无
添加到
标签
元素

除此之外，我并不知道还有其他问题。
就W3C而言，除了典型的label1与dom-element1一起使用等等，我看不到其他问题。。。就合规性而言，我认为你没问题。。这只是“不正常”。。但用刀切纸也不可行，但它确实有效。请注意，这与W3C不同，它认为label属性的值必须是同一树中根为label元素的labelable元素的ID。