first-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

你确实在瞄准二胎:

.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，利润。

查看您的 Fiddle 更新：http://jsfiddle.net/Lvd44upd/3/

Answer 2

我用过

.box.half { width: 49%; }

和

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

。似乎有效 here。

Answer 3

第一个 .half class 元素不是 .container 的第一个 child。这是第二个 child，因此您的选择器不起作用。

我建议使用

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

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

Answer 4

因为前半个框不是它父项的第一个子项，而是第二个。如此快速的解决方案是 .box.half:nth-child(2).

first-child 选择器不工作

first-child selector not working

html

css

css-selectors