如何在多个div中定位第一个img

Question

我正在尝试使用伪元素定位此HTML结构中的第一个img。

<div class="blog">
  <div
    <h3></h3>
  </div>
  <div>
    <div class="image">
      <a>
        <img>
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>
      </a>
    </div>
  </div>
</div>

我尝试了很多组合，但没有。这可能是我到目前为止最好的组合，但它只有在img是.blog中的第二个div时才有效。无论职位如何，都需要定位第一个img。

.blog > div:nth-of-type(2) > .image > a > img

Answer 1

您可以继续使用jQuery来轻松处理：.has()函数

找到父母后，为他们添加课程.addClass()

在样式表中创建该类。

现在你可能有类似类别的sibbling。

您可以使用 ~ 选择器

重置为您想要的每个sibbling接下来的第一个sibbling

$(".blog > div").has(".image").addClass(" seenAtFirst");

/* set regular and reset next similar targets */
.blog>div,
.seenAtFirst ~ .seenAtFirst  {
  border:none;
  background:turquoise;
  color:black;
  text-align:initial;/* initial can also be used to reset style */
}
/* set my first target*/
div.seenAtFirst {
  border:solid green;
  color:white;
  background:tomato;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blog">
  <div>
    <h3>title</h3>
  </div>
  <div>
    <div class="no-image">
      <a>
        <img>no-img
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>Target me and reset also next ones if any.
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>img
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>img
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>img
      </a>
    </div>
  </div>
</div>

Answer 2

我能想到的最简单的方法就是给它一个id，所以你可以通过它的id跟踪它，就像这样：

＆＃13;

＆＃13;

img#first_img {
 
}

＆＃13;

<div class="blog">
  <div
    <h3></h3>
  </div>
  <div>
    <div class="image">
      <a>
        <img id="first_img">
      </a>
    </div>
  </div>
  <div>
    <div class="image">
      <a>
        <img>
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;