如何在容器div中选择最后一个div？

Question

我想使用CSS进行选择，仅在第3行上应用一些背景色。 但是我有一个限制，就是我不能使用使用类名进行选择的css选择器。

能否请您指出我要解决的问题？谢谢！

<div class="root">
  <div class="row">1
  </div>
  <div class="row">2
  </div>
  <div class="row">3
  </div>
</div>

Answer 1

您可以使用

.root>div:last-child {
  background: green;
}

<div class="root">
  <div class="row">1
  </div>
  <div class="row">2
  </div>
  <div class="row">3
  </div>
</div>

Answer 2

使用

.root div:last-child {
  background: red;
}
.root div:nth-child(1) {
  color:red;
}

<div class="root">
  <div class="row">1
  </div>
  <div class="row">2
  </div>
  <div class="row">3
  </div>
</div>

如果您打算选择第3行，并决定添加更多行，则可以使用nth-child（3）

Answer 3

div.root：last-child将选择每个孩子。

尝试以下方法：

div.root div:last-child{
  background: green;
}

Answer 4

您可以通过不同的方式进行操作：

.root div.row:last-child {
  background:red;
}

.root div.row:last-of-type {
  background: green;
}

.root div.row:nth-last-child(1) {
  background: yellow;
}

<div class="root">
  <div class="row">1
  </div>
  <div class="row">2
  </div>
  <div class="row">3
  </div>
</div>