CSS：如何定位第n个直接孩子

Question

在this page上，我想摆脱推荐书下方和页脚上方的空白区域：

以下CSS无效：

＆＃13;

＆＃13;

 body > .container:nth-child(2) {display:none;}

＆＃13;

<div class="container">
	<div class="row">
		<div class="col-md-12 centered">
			<h3 class="border"><span>abc</span></h3>
		</div>
	</div>
	<div class="row adoption">
       xyz
			<!-- Display 3 Adoption -->
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

你能帮我理解为什么吗？

Answer 1

出于某种原因，这有效：body > .container:nth-child(9) { display: none; }

更新：我精神上因为没有意识到这一点而自责...... nth-child是订单中的数字。它不会被类过滤。更接近的是nth-of-type，但只是按元素标签过滤，如果它有类。不幸的是，在没有纯CSS解决方案的情况下讨论了here这个类的第二个元素。

Answer 2

使用您需要定位.row:nth-child(2)以隐藏第二行。

.container .row {
  margin: 5px;
  height: 10px;
  background: red;
}
.container .row:nth-child(2) {
  display: none;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 centered">
      <h3 class="border"><span></span></h3>
    </div>
  </div>
  <div class="row adoption">
    <!-- Display 3 Adoption -->
  </div>
</div>