从所有元素和嵌套元素中选择第一个子元素。

Question

我只需要选择 first 和 third最后一个元素。

在我决定把它们做成链接之前，它一直工作得很好。在我实际的源码中 divs 是 imgs

body {
  background-color: black;
  color: white;
}

.this:first-child {
  color: red;
}

.this:last-child {
  color: aqua;
}

<div class="main">
  <a href="">
    <div class="this">
      FIRST
    </div>
  </a>
  <a href="">
    <div class="this">
      SECOND
    </div>
  </a>
  <a href="">
    <div class="this">
      THIRD
    </div>
  </a>
</div>

Answer 1

你的 .this 元素被另一个元素(a)，他们是独生子女。这意味着他们既是第一个孩子，也是最后一个孩子，所以最后一条规则占了上风。将 :first-child 和 :last-child 的伪选择器。a 元素。

body {
  background-color: black;
  color: white;
}

a:first-child .this {
  color: red;
}

a:last-child .this {
  color: aqua;
}

<div class="main">
  <a href="">
    <div class="this">
      FIRST
    </div>
  </a>
  <a href="">
    <div class="this">
      SECOND
    </div>
  </a>
  <a href="">
    <div class="this">
      THIRD
    </div>
  </a>
</div>