Lighthouse 建議使用下一代影像格式以加快下載速度并減少資料消耗。這是使用 HTML<picture>元素完成的。
那么當我們使用<picture>element 時，如何將 CSS 樣式僅定位到加載的影像？
在下面的代碼段中，您可以看到邊框也被添加到其他元素中。
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 截取的上述片段結果的螢屏截圖以供參考：
uj5u.com熱心網友回復：
加載的影像將由img標簽表示，因此您可以只定位該元素。
不同的源元素只是提供不同的源（因此稱為這種方式），但瀏覽器決定使用什么（通過不同的因素）并將其加載到 img 標簽中。
您可以通過標簽名稱 ( picture img)來定位它，也可以添加一個實際的 css 類（我建議這樣做picture .image- 請參閱代碼段）。
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>uj5u.com熱心網友回復：
樣式選擇器只需要定位圖片元素內部的 img 標簽即可。你可以嘗試做圖片 img 而不是圖片 *。
但是，建議在圖片元素內的 img 標簽中添加一個類，并在您的 CSS 中將其作為最佳實踐的目標。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/352747.html