如何用CSS选择器精准选中HTML嵌套div元素中的中间元素？

来源：图像处理网作者：南京GEO公司头衔：草根站长

导读：本期聚焦于小伙伴创作的《如何用CSS选择器精准选中HTML嵌套div元素中的中间元素？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何用CSS选择器精准选中HTML嵌套div元素中的中间元素？》有用，将其分享出去将是对创作者最好的鼓励。

在前端开发中，我们常常遇到这样的结构：一个外层div里面套了多个div，而我们只想给处于中间位置的div添加特定样式。如果直接用 div 作为选择器，会把所有层级的div都选中，显然不符合需求。下面介绍几种利用CSS选择器精准命中中间元素的方法。

使用子选择器与 nth-child

当中间元素在父容器中有固定的排列顺序时，可以结合子选择器（>）和 nth-child 来选中。例如父div下有三个子div，第二个就是中间元素：

<div class="box">
  <div>第一个</div>
  <div>中间</div>
  <div>最后一个</div>
</div>

对应的CSS可以这样写，只选中 box 的直接子元素中排第二的div：

.box > div:nth-child(2) {
  color: red;
  border: 1px solid #ccc;
}

如果子div数量不固定，但想选中除第一个和最后一个之外的所有中间div，可以用 :not() 配合 :first-child 与 :last-child：

.box > div:not(:first-child):not(:last-child) {
  background: #f5f5f5;
}

这种写法在动态渲染列表时特别有用，不用关心具体有多少个中间项。

若父元素下除了div还有其他标签，用 nth-of-type 能只在div类型里数位置，避免被其他标签干扰：

.box > div:nth-of-type(2) {
  font-weight: bold;
}

还可以通过相邻兄弟选择器（+）选中某个元素后面的中间元素。例如选中第一个div之后的所有div，再用 :not(:last-child) 去掉末尾：

.box > div:first-child + div {
  margin-top: 10px;
}

精准选中嵌套div中的中间元素，核心在于先限定父级范围，再根据位置或类型过滤。实际项目中推荐优先使用子选择器加 :not() 排除法，可读性高且容错好。理解好 <div> 这类标签在文档树中的关系，才能写出更简洁的CSS。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。