Question

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

我想单独选择两个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来说，切片并给我一个解决方案。谢谢！

Answer 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>

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

1 个答案: