样式复选框，如果关注其他复选框

Question

以下代码似乎在Firefox中没有效果：

input[type="checkbox"] + input[type="checkbox"] {
    margin-top: 12px;
    }

虽然这有效：

input[type="checkbox"] {
    margin-top: 12px;
    }

为什么？

---

HTML

<div>
    <input type="checkbox" name="somename[]" id="somename" value="1"> One<br>
    <input type="checkbox" name="somename[]" value="2"> Two<br>
    <input type="checkbox" name="somename[]" value="3"> Three<br>
    ...
</div>

Answer 1

这是因为+选择器适用于相邻的兄弟。在您的情况下是<br>标签，因此没有相邻的复选框..

这适用于中间的<br>标记：

input[type="checkbox"] + br + input[type="checkbox"] {
    margin-top: 12px;
}

或使用〜选择器：

input[type="checkbox"] ~ input[type="checkbox"] {
    margin-top: 12px;
}

Answer 2

在这种情况下，<br>标签是相邻的兄弟。您需要使用general sibling selector，~来选择同级<input>。

input[type="checkbox"] ~ input[type="checkbox"] {
  margin-top: 12px;
}