如何仅为<picture>元素中实际加载的图片应用CSS样式

问题背景 #

Lighthouse 建议使用下一代图片格式实现更快的下载速度与更低的数据消耗，该需求可通过 HTML <picture> 元素实现。

我们在使用 <picture> 元素时，常会遇到需要仅对实际加载的图片应用CSS样式的场景。如果直接使用通用选择器匹配 <picture> 的所有子元素，会出现样式应用不符合预期的问题，示例代码如下：

问题示例代码

/* 该写法会错误匹配所有子元素，不符合预期 */
picture * {
  border: 2px solid red;
}

<div style="display: flex; gap: 30px;">
  <p>AVIF: 50</p>
  <p>WebP: 100</p>
  <p>img: 150</p>
</div>

<picture>
  <source type="image/avif" srcSet="https://via.placeholder.com/50" width="50" height="50" />
  <source type="image/webp" srcSet="https://via.placeholder.com/100" width="100" height="100" />
  <img src="https://via.placeholder.com/150">
</picture>

注意：截至当前，Chrome 支持 AVIF 格式，Edge 与 Firefox 支持 WebP 格式，浏览器会根据自身支持情况加载对应类型的图片。

以下为 Microsoft Edge 中运行上述代码片段的效果截图，供参考：

解决方案 #

<picture> 元素下的 <source> 标签仅作为资源候选的元数据存在，不会被浏览器渲染到页面中。无论浏览器最终选择加载哪个 <source> 对应的资源，最终都会将资源内容加载到 <picture> 内部的 <img> 标签中展示，所以只需要针对该 <img> 标签设置样式即可：

/* 仅匹配实际渲染的图片元素 */
picture img {
  border: 2px solid red;
}

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