html - 使用 :nth-of-typen only works with (0) and (1) 使图像消失

Question

我刚刚在 Codecademy 上完成了顶点元素，但希望在进入较小的屏幕尺寸时让阅读期刊的人消失。总共有 3 个 img-holder div...我试过了，但它也删除了底部的图像...

 .supporting .img-holder:nth-of-type(0) {
      display: none;
    }

<div class="container supporting">
  <div class="img-holder">
  <img src="images/information-main.jpg">
    <div class="caption">
      <h2>It doesn't hurt to keep practicing</h2>
      <p>Lorem ipsusssm dolor sit amet, consectetur adipisicing elit. Id accusantium, optio est prribus!</p>
      <p id="signature">Emmanuel, Sr Strategist at Hiring.com</p>
    </div>
  </div>
</div>

我不明白为什么它在使用时不起作用 Live version is visible here

Answer 1

:nth-of-type 根据范围内的元素类型(例如 div)选择元素。具有如下结构的含义:

div.supporting
  div.img-holder A
div.supporting
  div.img-holder B
div.supporting
  div.img-holder C

选择器 .supporting .img-holder:nth-of-type(1) 选择所有三个。 A 是其父级中其类型 (div) 的第一个。 B 也是其父类中的第一个类型。 C 也是如此。

也许你想要 .supporting:first-child .img-holder – 这只会选择 A。 (请注意，这仍然假设特定的 .supporting 是其容器的第一个 child 。这可能不是这样，并且有变通方法。解决它的最简单方法是拥有一个特定的类对于第一个 .supporting，如果它意味着不同的行为。这将在没有复杂/难以理解/难以修改的选择器的情况下工作，具有很好的浏览器支持。)