如何定位<picture>元素？CSS无法隐藏第二个<picture>内的<img>

你提到的思路是对的——<picture>元素最终确实会渲染内部的<img>，但你的CSS选择器逻辑出了问题，导致无法定位到目标元素。让我帮你拆解一下问题：

问题根源 #

你的选择器 .top-grid-container > div > img:nth-of-type(2) 试图选中div下的第二个<img>，但实际上每个<img>都被包裹在独立的<picture>元素里。也就是说，每个<picture>是<img>的直接父元素，而<div>的直接子元素是<picture>，不是<img>。所以在每个<div>下，不存在第二个直接子级的<img>，自然这个选择器不会生效。

解决方案 #

你需要调整选择器，先定位到每个<div>下的第二个<picture>，再选中它内部的<img>，或者直接隐藏第二个<picture>。这里有两种可行的写法：

方案1：定位第二个<picture>内部的<img>

/* 选中每个.top-grid-container下的div里的第二个picture，再选中它的img */
.top-grid-container > div > picture:nth-of-type(2) img {
  display: none;
}

方案2：直接隐藏第二个<picture>（效果和隐藏内部img一致）

.top-grid-container > div > picture:nth-of-type(2) {
  display: none;
}

额外小修正 #

顺便提一下你HTML里的一个语法小错误：.top-Tasty里的第一个<source>标签，srcset属性里多了一个多余的逗号，可能会导致图片加载异常，建议修正：

<!-- 错误写法 -->
<source srcset="https://loremflickr.com/320/240/paris, 1x, https://loremflickr.com/640/480/paris 2x, https://loremflickr.com/1280/960/cat 3x">
<!-- 修正后 -->
<source srcset="https://loremflickr.com/320/240/paris 1x, https://loremflickr.com/640/480/paris 2x, https://loremflickr.com/1280/960/cat 3x">

把上面的CSS替换掉你原来的目标选择器，就能实现隐藏每个<div>下第二个<picture>（及其内部<img>）的效果了。

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