第一个孩子选择器不工作

Question

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

我已经尝试了第一个孩子和第一个类型,但仍然无法正确定位目标类.

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

请看这个小提琴并帮我删除第一个孩子的左边缘.

.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紧随 a 之后的任何内容.box.full都有您想要的边距。