Html 仅引用复选框的标签的选择器

我想知道是否有一个CSS选择器来选择任何引用输入类型

复选框的
标签

<label for="checkbox_1">First checkbox</label>
<input type="checkbox" name="checkbox_1" value="1">

但我必须对每个涉及复选框的标签重复这一点。
我想做一些类似的事情：

label[type='checkbox'] { /* styles */ }

有什么想法吗？
您可以使用选择器选择所有类型属性以“复选框”开头的标签：

有关属性选择器的更多信息，请参见此处：
据我所知，纯CSS目前无法实现此功能。不过，您确实有两种变通方法：

[attribute^='value']选择器

如果标签在与复选框关联时实际以相同的标识符/单词开头，这将起作用，类似于您提供的代码示例

例如：

HTML


以某种方式编写HTML

如果您已经将
及其关联的
放在自己的容器中，或者您可以通过这种方式修改HTML，那么这将起作用。诀窍是通过CSS选择复选框元素的容器，然后为其子元素设置样式

例如：

HTML


使用JS

如果您愿意，我可以用JavaScript（/jQuery）编写一个简单的代码示例
 在CSS4中，使用
label:has（[type=checkbox]）
可能会在本机实现这一点。迫不及待。哦，等等，如果它们不是嵌套的，这可以通过
+
选择器：
[type=checkbox]+标签来完成。但这只有在
label
和
input
相反的情况下才有效……好吧，我做了一些进一步的研究：注释建议将来使用类似
label:has（+[type='checkbox']）
的语法。但是，当它们反过来时，演示它们的用法。@Xufox感谢您的研究。所以基本上我的标记是，标签和输入被一个包装器div分开。比如：
不应该是
^=
而不是
=
？还是
^=
而不是
=^
。你说得对。我修好了。我在看。。。我不能再去学校了，但它也在那里
|=
选择以连字符分隔的列表的开头。右键。学校没有提到连字符。
label[type='checkbox'] { /* styles */ }

label[type^='checkbox']

<label for='chckbx'>Foobar</label>
<input type='checkbox' name='chckbx_1' value='1' />

label[for^='chckbx']{/* styles */}

<div class='checkboxContainer'>
    <label for='foo'>Foobar</label>
    <input type='checkbox' name='foo' value='1' />
</div>

.checkboxContainer > label{/* styles */}