如何使用 CSS 定位具有相同类的 4 个 div 中的特定 div答案

【问题标题】：How to target a specific div out of 4 divs with the same class with CSS如何使用 CSS 定位具有相同类的 4 个 div 中的特定 div
【发布时间】：2016-07-27 06:07:42
【问题描述】：

如何在以下示例中使用 CSS 定位第 4 个 div（类 .col-sm-3）？

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
      <div class="col-sm-3">...</div>
    </div> <!--/.row-->
   </div> <!--/.container-->
  </div> <!--/#footer-->

谢谢！

【问题讨论】：

你试过什么？您是在寻找第四次出现的具有 col-sm-3 类的 div，还是只是在寻找 div.row 的第四个 div 子项？您显示的 div 之间是否还有其他 div？
:last-child 或 :last-of-type 或 :nth-child 选择器。
How can I get the second child using CSS?的可能重复
.col-sm-3:last-child {} 完成了这项工作，谢谢！

标签： html css css-selectors

【解决方案1】：

使用

.col-sm-3:last-child {}

或

.col-sm-3:nth-child(4) {}

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【讨论】：

您应该使用信誉更好的来源，例如 MDN 或 W3，而不是容易出错的 W3Schools
@Zach Saucier - 改变了它。

【解决方案2】：

你可以试试：

 .col-sm-3:nth-child(4){}

【讨论】：

您应该使用信誉更好的来源，例如 MDN 或 W3，而不是容易出错的 W3Schools