如何检测父元素最后一个子元素的标签名以决定是否添加样式？

直接用 img:last-child 选择器就能实现你的需求，它会精准匹配既是img标签、同时又是父元素最后一个子元素的元素，代码如下：

/* 全局生效：所有符合条件的img */
img:last-child {
  padding: 20px;
}

/* 仅针对特定父元素（比如#my-div）下的img */
#my-div img:last-child {
  padding: 20px;
}

关键说明： #

• 你之前写的 #my-div:last-child 逻辑不对，它是选中作为某个元素最后一个子元素的#my-div容器，而非容器内的img，所以要把选择器的目标换成img。
• 区分你提到的两个相似选择器：
  • img:last-of-type 是选父元素里最后一个img标签，但这个img不一定是父元素的最后一个子元素（比如父元素末尾还有个<p>标签，这个选择器还是会选中最后一个img，但不符合你的需求）。
  • img:last-child 则是双重筛选：先找所有img，再筛选出是父元素最后一个子元素的那些，完全匹配你要的“仅当img是父元素最后一个子元素时加样式”的场景。

内容的提问来源于stack exchange，提问作者Remi Guan