使用:nth-of-type()定位第二个<img>标签样式失效求助

嘿，我一眼就看出问题所在了——你的CSS选择器逻辑错了！

你写的img:nth-of-type(2)是用来匹配同一个父元素下的第二个<img>标签，但看你的HTML结构，每个<img>都被放在独立的<div class="cell small-4">和<a>标签里，每个<img>的直接父元素都是各自的<a>，而每个<a>里只有这一个<img>，所以这个选择器根本找不到任何元素，规则自然不会生效。

下面给你两个可行的修复方案：

方案1：定位到第二个容器再选中图片 #

如果你的目标是给.product-highlights区域里的第二张图片加边距，先找到第二个.cell容器，再选中里面的图片就行：

.product-highlights .cell:nth-of-type(2) img {
  margin: 0 4px;
}

方案2：更精准的层级选择（可选） #

如果.grid-x下直接就是.cell元素，你可以用子选择器>来让规则更精准，避免意外匹配到其他嵌套的.cell：

.product-highlights .grid-x > .cell:nth-child(2) img {
  margin: 0 4px;
}

小提醒 #

别搞混:nth-of-type和:nth-child的区别：

• :nth-of-type(n)是在当前父元素下，按元素类型计数第n个元素
• :nth-child(n)是在当前父元素下，按所有子元素的位置计数第n个元素

根据你的结构稳定性选合适的就行啦！

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