CSS overflow相关问题：如何仅对容器内最后两个div设置overflow:hidden

核心思路 #

不要在父容器上设置overflow: hidden，直接给需要做溢出隐藏的两个子元素单独设置该属性即可，不会影响其他子元素的展示。

可选方案 #

方案1：CSS伪类匹配（推荐） #

通过CSS3的:nth-last-child伪类直接选中最后两个子元素，无需修改HTML结构，适配绝大多数移动端场景：

/* 可根据实际业务修改容器、子元素的类名 */
.mobile-container .content-item:nth-last-child(-n + 2) {
  overflow: hidden;
  /* 溢出隐藏需要配合高度限制才会生效，可根据需求调整数值 */
  max-height: 120px;
}

说明：:nth-last-child(-n + 2)会从最后一个子元素向前计数，匹配倒数第1、倒数第2两个元素，所有主流移动端浏览器均支持该属性。

方案2：精准过滤div类型子元素 #

如果容器内还存在div以外的其他类型子节点，可使用:nth-last-of-type做类型过滤，确保只选中最后两个div子元素：

.mobile-container > div:nth-last-of-type(-n + 2) {
  overflow: hidden;
  max-height: 120px;
}

方案3：手动加类兼容老旧设备 #

如果需要兼容不支持CSS3伪类的极端老旧设备，可以手动给最后两个div添加自定义类后设置样式：

.mobile-container .overflow-hidden {
  overflow: hidden;
  max-height: 120px;
}

<div class="mobile-container">
  <div>普通内容段1</div>
  <div>普通内容段2</div>
  <div>普通内容段3</div>
  <div class="overflow-hidden">倒数第二段内容</div>
  <div class="overflow-hidden">最后一段内容</div>
</div>

内容的提问来源于stack exchange，提问作者Kartik Sharma