Question

我正在尝试构建一个简单的盒子系统，我需要删除第一个孩子的右边距。

我尝试了第一个孩子和第一个类型，但仍无法正确定位目标类。

我已阅读了许多不同的例子，仍然无法找到解决方案。

请参阅此fiddle并帮我删除第一个孩子的左边距。

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: black;
}

.box {
  margin: 1% 0 1% 0;
  float: left;
  background-color: gray;
  box-sizing: border-box;
  color:white;
}
.box.full {
  width: 100%;
  margin-left: 0;
}

.box.half {
  width: 49%;
  margin-left: 1%;
}

.half:first-child {
  margin-left: 0;
}

Answer 1

第一个.half类元素不是.container的第一个子元素。它是第二个孩子，因此你的选择器不起作用。

我建议使用

.box.full + .box.half {
    margin-left: 0;
}

指定在.box.half之后立即出现的任何.box.full都有您想要的保证金。

Answer 2

你确实瞄准了第二个孩子：

.box.half:nth-child(2) {
  margin-left: 0;
}

试试这个：）

.box.half {
  width: 49%;
}

.box.half + .box.half
{
    margin-left: 2%;
}

.box.half仅在.box.half之前有margin-left: 2%。

没有剩余边距，没有更多的右边距，49 + 49 + 2 = 100，利润。

查看您的小提琴更新：http://jsfiddle.net/Lvd44upd/3/

Answer 3

我用过

.box.half { width: 49%; }

和

.box.half:last-child { margin-left: 1%; }

。似乎工作here。

Answer 4

因为前半部分框不是其父级的第一个子框，所以它是第二个。如此快速的解决方案是.box.half：nth-child（2）。

第一个孩子选择器不工作

4 个答案: