设置不带ID和标签的html复选框的样式

因此，我使用HTML复选框来创建可折叠的注释树。HTML和CSS代码相当简单

HTML:

当我尝试使用样式化的复选框时，我的问题就出现了。我找到的每个用CSS设置复选框样式的方法都要求每个复选框都有一个唯一的id，该id与复选框标签中的“for=”匹配

我将通过批量查找和替换向几个html文档添加数百个这样的文档，所以我不想设置某种脚本来为每个文档指定唯一的名称

---

是否有任何不需要为每个复选框指定唯一id的样式化方法？解决方案最好不需要javascript或jquery，我希望使用html和css。

使用属性选择器访问所有复选框。 然后使用id访问需要覆盖用于所有复选框的常规样式的特定复选框

input[type=checkbox] {
    // General styles for all checkboxes here
}
#specific-checkbox-id {
    // Specific styles here
} 

---

将一个类添加到所有复选框中并使用该类对其进行样式化如何

HTML:

<input type="checkbox" class="hide-box my-style">
<div class="hidable">
Example<br>
<input type="checkbox" class="hide-box my-style">
<div class="hidable"> 
Example
<input type="checkbox" class="my-style"> <!-- This won't have the hide logic-->

.hide-box:checked~.hidable {
    display:none;
}

.my-style {
    // Insert your styles here
}

---

你说的“风格化”盒子是什么意思？你不能只使用类吗？和.样式化{my_styles_here}您可以修改您的标记吗？我有一个非常防弹的解决方案，但需要在输入端加上包装。是的，如果你有另一个更好的解决方案，请务必让我知道。我并不特别喜欢这个方法，但我确实想让它完全使用CSS和HTML。谢谢你的快速回答。我的问题是，我尝试过的大多数事情都没有影响。您是否知道使用此方法可以将哪些类型的样式有效地应用于复选框？表单元素（即复选框）特别难以设置样式-尤其是在不同的浏览器中。如果需要创建许多样式更改，最好的选择是隐藏复选框的显示，并用自己的样式元素替换它。在这种情况下，请确保使用

：checked

选择器来显示隐藏复选框的状态。我所看到的每个方法都要求每个复选框具有唯一的ID和标签，正如我所说的，我需要避免这种情况。如果您知道一种实现方法，而不需要每个复选框都需要代码的唯一部分，那么这将非常有用。

<input type="checkbox" class="hide-box my-style">
<div class="hidable">
Example<br>
<input type="checkbox" class="hide-box my-style">
<div class="hidable"> 
Example
<input type="checkbox" class="my-style"> <!-- This won't have the hide logic-->

.hide-box:checked~.hidable {
    display:none;
}

.my-style {
    // Insert your styles here
}