Image div的第n个子项内的img未显示css

我有一个css网格，我试图在父“包装器”的第二个“盒子”子级上创建不同的行为。在Chrome中检查时，所有.box CSS和.box:n子项（2）的CSS都将被提取

所有的img标签都使用了CSS和.box img

但是，它没有选择

框：第n个孩子（2）img

这是我的HTML：

<div class="wrapper" style="height:685px">
  <div class="box">
    <a href="">
      <div>
        <img src="">
        <div class="clickableItem"><span style="font-size: 140%">Trolley Setup</span></div>
      </div>
    </a>
  </div>
  <div class="box">
    ...
  </div>
  <div class="box">
    ...
  </div>
</div>

知道我做错了什么吗

我还尝试了：

.box:n个孩子（2）一个div img

这个规则

.box a div {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

---

…使您的所有

img

元素都具有弹性子元素（因为它们是使用该规则寻址的元素的直接子元素），因此

float

设置不会影响它们中的任何一个。这就是为什么第二个子元素中的图像与其他子元素中的图像没有区别。

：nth-child（）

就是这样做的——选择指定的第n个子元素。当您在其上预先添加一个类时，它将成为

：nth-child（）

的过滤器，并且仅当第n个子元素具有该类时才应用您的规则。换句话说，它不是先查看类，然后从该组中选择子元素。伪选择器应用于它前面的元素，因此

。wrapper:nth child（2）

将应用于父元素中作为第二个“wrapper”类元素的任何元素，请使用

。wrapper.box:nth child（2）

instead感谢@j08691的解释。我明白我现在做错了什么。我感谢你的帮助。我似乎不知道如何为.wrapper matching.box class.constanted的第二个子元素中的任何img元素设置规则，谢谢。我看不出这是一个冲突，因为我的

.box:nth child（2）img

规则没有被应用，所以我在chrome dev视图上看不到CSS冲突。

.box a div {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}