如何在输入框中留出边距复选框

Question

假设拥有：

<div class="home">
<input type="checkbox"/>....
</div>

我需要在复选框中插入margin-left:3px。我的CSS代码是：

.home+input[type=checkbox]{
margin-left:3px;
}

任何人都可以帮助我^

Answer 1

您几乎已经拥有了，只需要在引号input[type="checkbox"]内包裹复选框即可

input[type="checkbox"] 
  {
    margin-left:10px;
  }

<div class="home">
<input type="checkbox"/>
</div>

Answer 2

.home input[type="checkbox"]{
margin-left:3px;
}

<div class="home">
<input type="checkbox"/>....
</div>

您确实不需要加号...除非您有特殊需要，并且您需要在checkbox周围加引号。.

Answer 3

其他两个答案都可以，但是都不是准确的。

尽管我倾向于建议在属性选择器[type="checkbox"]周围加上引号，但它将work perfectly fine不带引号[type=checkbox]。仅当包含特殊字符时才需要引号。

代码不起作用的原因是选择器matches siblings中的+。

.home+input[type=checkbox]{}将使输入元素与复选框类型匹配，该复选框的类型紧随其后是具有home类的元素。

<div class="home">....</div>
<input type="checkbox"/>....

由于您的输入元素嵌套在.home中，因此您将不会使用同级选择器+

这就是为什么此代码可以解决问题的原因：

.home input[type=checkbox]{
margin-left:3px;
}

<div class="home">
<input type="checkbox"/>....
</div>