Html 第一个子选择器不工作

我试图建立一个简单的盒子系统，我需要删除第一个孩子的右边距

我试过第一个孩子和第一个类型，但仍然无法正确地针对预期的类别

我已经阅读了许多不同的例子，但仍然找不到解决办法

请查看此内容，并帮助我删除第一个孩子留下的空白。

.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;
}

---

你的目标确实是第二个孩子：

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

试试这个：）

.box.half

仅当前面有

.box.half

时，才会有

剩余边距：2%

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

查看您的小提琴更新：

我用过

.box.half { width: 49%; }

及

---

。似乎有效。

第一个

.half

类元素不是

.container

的第一个子元素。它是第二个子项，因此选择器不起作用

我建议使用

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

---

指定紧跟在

.box.full

之后的任何

.box.half

具有所需的边距。

因为前半框不是其父框的第一个子框，所以它是第二个子框。所以快速的解决方案是.box.half:n个孩子（2）。

Exaclty。Via w3schools：“第一个子选择器匹配父元素的第一个子元素”。感谢大家的帮助。现在我对如何使用第一个子选择器有了更好的理解。为了解决我的问题，我简单地引入了一个.row类，这样第一个子类实际上以适当的元素为目标。

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

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