html - 没有 ID 和标签的样式 html 复选框

Question

所以我使用 HTML 复选框来创建可折叠的评论树。 HTML 和 CSS 代码相当简单。

HTML:

<input type="checkbox" class="hide-box">
<div class="hidable">
    Example<br>
    <input type="checkbox" class="hide-box">
        <div class="hidable">
        Example

CSS:

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

当我尝试使用程式化的复选框时，我的问题就来了。我发现使用 CSS 对复选框进行样式化的每一种方法都要求每个复选框都有一个唯一的 ID，该 ID 与复选框标签中的“for=”相匹配。

我将通过大量查找和替换将数百个这样的文件添加到几个 html 文档中，因此我不想设置某种脚本来为每个文件指定一个唯一的名称。

是否有任何不需要为每个复选框赋予唯一 ID 的样式化复选框的方法？最好该解决方案不需要 javascript 或 jquery，我想坚持使用 html 和 css。

Answer 1

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

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