CSS最后一个子选择全部？

我一直在试图弄明白为什么我下面的代码不能按预期工作。 基本上，我希望ups

img

的宽度为60px，联邦快递

img

的宽度为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>

---

但两个img似乎都受到最后一个孩子的影响

现在您有了.delivery services:：n个子元素（3），这意味着它应用于.delivery services元素，该元素是父元素的第三个子元素。那不是你想要的。您正在寻找的

是.delivery services的第三个子项。所以你需要你的CSS是：

.delivery-services {

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

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

---

现在有了.delivery services:：nth子元素（3），这意味着它应用于.delivery services元素，该元素是父元素的第三个子元素。那不是你想要的。您正在寻找的

是.delivery services的第三个子项。所以你需要你的CSS是：

.delivery-services {

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

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

---

以下是浏览器处理选择器的方式。

。配送服务：最后一个子img

：

使用类

.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

：

使用类

.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>`

---

当使用CSS时，必须考虑操作的顺序。在您提供的示例中，请考虑所使用的层次结构。应用样式时，将其设置为顶部并向下工作。例如，配送服务->a->img。要将此应用于子类，请理解您正在查找第一个a中的图像。因此，我将其设置为：

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

---

但是，对于这样的特定实例，我会为每个实例或内联样式分配不同的类。第n个子对象是循环和迭代的理想对象a->img。要将此应用于子类，请理解您正在查找第一个a中的图像。因此，我将其设置为：

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

---

但是，对于这样的特定实例，我会为每个实例或内联样式分配不同的类。第n个子对象是循环和迭代的理想对象

有关关闭

img

tag的无关问题，请参阅。谢谢，这是笔井，

delivery services

是其父项的最后一个子项。尝试在

和
之后添加空格。devtools style inspector是您在这里的朋友。@Jim，看看我的，我已经解释了在帽檐下发生的事情。有关关闭
img
标签的无关问题，请参阅。谢谢，这是笔井，
送货服务
是其父母的最后一个孩子。尝试在
和
之后添加空格。devtools style inspector是你的朋友。@Jim，看看我的，我已经解释了引擎盖下发生的事情。请校对你的帖子。您需要退出
，以确保它不会被吞下。还有，为什么这里需要符号？或者是
a
就这件事而言？这很有效！：）我不知道我正在选择
。送货服务
。到目前为止，这个话题让我有些困惑。谢谢是的，torazaburo是正确的，我的css没有额外的
&
请校对你的帖子。您需要退出
，以确保它不会被吞下。还有，为什么这里需要符号？或者是
a
就这件事而言？这很有效！：）我不知道我正在选择
。送货服务
。到目前为止，这个话题让我有些困惑。谢谢是的，torazaburo是正确的，我的css没有额外的
&
谢谢，我在scss上，所以在我的文件中应该是
&:nth-…
（y）@Jim，如果它回答了你的问题，你可以接受我的答案：）。如果你像这样写
&:nth-.
，它将是你一开始所拥有的。我的版本应该可以正常工作。谢谢，我在scss上，所以在我的文件中应该是
&:nth-…
（y）@Jim，如果它回答了你的问题，你可以接受我的答案：）。如果你像这样写
&:nth-.
，它将是你一开始所拥有的。我的版本应该可以正常工作。