Question

我一直在试图弄清楚为什么我的代码不能按预期工作。基本上我希望ups img让width: 60px和fedex img拥有width: 100px。

我的标记是：

<div class="delivery-services">
    <span>Delivery Services</span>
    <br>
    <a href="#"><img src="img/fedex.png" alt="fedex" /></a>
    <a href="#"><img src="img/ups.png" alt="ups" /></a>
</div>

SCSS是：

.delivery-services {

  &:nth-child(3) img  {
    width: 100px;
  }

  &:last-child img {
    width: 60px;
  }
}

但似乎两个img都受到last-child的影响！

Answer 1

以下是浏览器如何处理您的选择器.delivery-services:last-child img：

找到类.delivery-services的元素，并确保它是最后一个孩子。它找到<div class="delivery-services">，它确实是最后一个孩子。如果您更改了HTML，请执行以下操作：
```
<div class="delivery-services">
    <span>Delivery Services</span>
    <br>
    <a href="#"><img src="img/fedex.png" alt="fedex" /></a>
    <a href="#"><img src="img/ups.png" alt="ups" /></a>
</div>
<div>I am last child now</div>`
```
您会看到您的选择器与任何img元素都不匹配。
查找第一步找到的元素中的所有img元素

这就是样式width: 60px;应用于所有img元素的原因。

我还建议你在这些图像上使用类。 nth-child选择器非常适合重复出现的模式，例如，每个第3行都必须具有绿色背景。

如果您需要使用nth-child选择器

.delivery-services {

  :nth-child(3) img  {
    width: 100px;
  }

  :last-child img {
    width: 60px;
  }
}

Answer 2

现在您有.delivery-services :: nth-child（3），这意味着它适用于作为父级的第3个子级的.delivery-services元素。那不是你要找的东西。您正在寻找{。1}}，这是.delivery-services的第3个孩子。所以你需要你的CSS：

<a>

Answer 3

使用CSS时，您必须考虑操作的顺序。在您提供的示例中，请考虑该层次结构。在应用样式时，它将其设置为顶部并向下运行。例如，交付服务 - ＆gt; a - ＆gt; IMG。要将其应用于子类，请了解您正在寻找第一个内部的图像。因此，我将其设置为：

.delivery-services a:nth-child(4) img{
    width: 100px;
  }
.delivery-services a:nth-child(3) img{
  width: 60px;
}

但是，对于这样的特定实例，我会为每个实例或内联样式分配不同的类。 nth-child非常适合循环和迭代。

CSS last-child选择全部？

3 个答案: