如何使用CSS在移动端仅展示3个列表项且不修改原有HTML结构

完全可以实现，无需修改现有HTML结构，仅通过新增CSS媒体查询和序号选择器即可达到需求效果。

实现思路 #

• 用max-width: 414px的媒体查询匹配目标移动设备场景
• 用:nth-child(n+4)选择器选中第4个及之后的列表项，在移动设备场景下设置为隐藏即可

完整CSS代码 #

/* 原有代码保持不变 */
.list {
  width: 300px;
  /* 可选：清除ul默认内边距，避免样式偏移 */
  padding: 0;
  margin: 0;
  list-style: none;
}
.list .item {
  width: 100%;
  text-align: center;
  padding: 16px;
  background-color: #fed71a;
  /* 可选：修正盒模型宽度计算，避免padding撑宽容器 */
  box-sizing: border-box;
}

/* 新增移动端适配代码 */
@media only screen and (max-width: 414px) {
  .list .item:nth-child(n+4) {
    display: none;
  }
}

代码说明 #

• nth-child(n+4)的匹配逻辑是：n从0开始递增，当表达式结果≥1时生效，因此会匹配第4、5、6个列表项，刚好覆盖需要隐藏的3个元素
• 新增的box-sizing: border-box是可选优化，避免元素设置padding后总宽度超过父容器的300px
• 可选的列表默认样式清除也是优化项，不影响核心隐藏逻辑

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