html - 第一个 child 选择器不工作

Question

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

我已经尝试了 first-child 和 first-of-type，但仍然无法正确定位目标类(class)。

我已经阅读了许多不同的示例，但仍然找不到解决方案。

请看这个fiddle并帮助我移除第一个 child 的 margin-left。

.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 的第一个子元素。它是第二个 child ，因此您的选择器不起作用。

我建议使用

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

指定紧接在 .box.full 之后的任何 .box.half 都具有您想要的边距。