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与＆＃34; for =＆＃34;匹配。在复选框标签中。

我将在数个html文档中添加数百个以及大量查找和替换，因此我不想设置某种脚本来为每个文档指定一个唯一的名称

是否有任何方法可以对复选框进行样式化，而不需要为每个复选框提供唯一ID？优选地，解决方案不需要javascript或jquery，我想坚持使用html和css。

Answer 1

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

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

Answer 2

如何在所有复选框中添加一个类并使用该类设置样式？

<强> 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-->

<强> CSS：

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

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

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

2 个答案: