如何在相邻和嵌套的 DIV 中选择 DIV？答案

【问题标题】：How to select DIV within adjacent and nested DIV's?如何在相邻和嵌套的 DIV 中选择 DIV？
【发布时间】：2016-09-26 12:49:53
【问题描述】：

我需要选择特定的 DIV，而不选择其中的子/嵌套 DIV，仅使用 CSS。

我想单独选择两个 DIV。这些是包含文本的 DIV：

image-content (1) 和
image-content (2)

.home_image_widget-2 > div:first-child div:first-child {
   background-color: gold;
}

<div class="home_image_widget home_image_widget-2">PARENT DIV (wrapper)
  <div class="image-content">image-content (1)
      <div class="imageWidget_img">&nbsp; &nbsp; imageWidget_img (1)</div>
      <div class="home_image_widget_caption">&nbsp; &nbsp; home_image_widget_caption (1)</div>
  </div>
  <div class="image-content">image-content (2)
      <div class="imageWidget_img">&nbsp; &nbsp; imageWidget_img (2)</div>
      <div class="home_image_widget_caption">&nbsp; &nbsp; home_image_widget_caption (2)</div>
  </div>
</div>

使用 CSS，当我尝试 .home_image_widget-2 > div:first-child div:first-child {} 时，它只选择 imageWidget_img (1) 的 DIV，但我需要它的父代。

我在这方面花了几个小时没有成功，所以对于你们所有的 CSS Ninja，请给我一个解决方案。谢谢！

【问题讨论】：

您要选择 .image-content 而不是 .imageWidget_img 吗？如果是这样，为什么不只使用：.home_image_widget-2 .image-content { background-color: red; }.
我尝试了您的解决方案（在fiddlesalad.com/css 上），它选择了父项下的所有内容。抱歉，这是不行的……
我想我想念你所说的“DIV包含文本：图像内容（1）和图像内容（2）”的意思，因为那个Div是.image-container并且它包含.imageWidget_img和home_image_widget_caption。你的意思是只选择文本“image-content…”吗？

标签： html css css-selectors

【解决方案1】：

不完美。

.home_image_widget-2 > div {
   background-color: gold;
}
.home_image_widget-2 > div div{
   background-color: white;
}

<div class="home_image_widget home_image_widget-2">PARENT DIV (wrapper)
  <div class="image-content">image-content (1)
      <div class="imageWidget_img">&nbsp; &nbsp; imageWidget_img (1)</div>
      <div class="home_image_widget_caption">&nbsp; &nbsp; home_image_widget_caption (1)</div>
  </div>
  <div class="image-content">image-content (2)
      <div class="imageWidget_img">&nbsp; &nbsp; imageWidget_img (2)</div>
      <div class="home_image_widget_caption">&nbsp; &nbsp; home_image_widget_caption (2)</div>
  </div>
</div>

【讨论】：