仅将 CSS 样式应用于从`<picture>` 元素加载的图像答案

【问题标题】：Apply CSS style only to the loaded image from`<picture>` element仅将 CSS 样式应用于从`<picture>` 元素加载的图像
【发布时间】：2021-12-19 11:57:19
【问题描述】：

灯塔建议using next-gen image formats for faster download and less data consumption。这是使用 HTML <picture> 元素完成的。

那么当我们使用<picture>元素时，如何将CSS样式仅定位到加载的图像？

在下面的 sn-p 中，您可以看到边框也被添加到其他元素。

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，因此根据您的浏览器加载相应的文件类型。

Screenshot of above snippet result taken from Microsoft Edge for reference:

【问题讨论】：

图片img{...} ?

标签： html css image lighthouse

【解决方案1】：

加载的图像将由 img 标签表示，因此您可以只定位该元素。

不同的源元素只是提供不同的源（因此它被称为这种方式），但浏览器决定使用什么（由不同的因素）并将其加载到 img 标签中。

您可以通过标记名称 (picture img) 来定位它，也可以添加一个实际的 css 类（我建议使用 picture .image - 参见 sn-p）。

picture .image {
  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 class="image" src="https://via.placeholder.com/150">
</picture>

【讨论】：

仅供参考 - 在Mozilla Web Docs中提到

【解决方案2】：

样式选择器只需要定位图片元素内部的img标签即可。代替图片 * 你可以尝试做图片 img。

但是，建议在图片元素内的 img 标记中添加一个类，并在 CSS 中将其作为最佳实践。

【讨论】：