TYPO3 v10中如何无需类名/ID用CSS为指定图片设置样式？

如果无法给目标图片添加类名或ID，你可以通过以下几种CSS方式精准定位这张图片：

1. 精确匹配图片完整地址 #

使用CSS属性选择器精准匹配图片的src属性值，仅对该图片生效：

img[src="https://your-domain.com/path/to/target-image.jpg"] {
  width: 100px;
  height: 100px;
}

注意：如果TYPO3给图片地址自动添加了缓存参数（比如?c=xxx），这种精确匹配会失效，建议用下面的部分匹配方式。

2. 部分匹配图片地址 #

针对图片地址中固定的特征（比如文件名、目录），用模糊匹配选择器定位：

• 包含指定字符串：匹配src中包含某段内容的图片，适合带参数的图片地址

/* 匹配所有src里包含"target-image"的图片 */
img[src*="target-image"] {
  width: 100px;
  height: 100px;
}

• 以指定内容开头：匹配图片地址从某个目录开始的图片

img[src^="https://your-domain.com/uploads/banners/"] {
  width: 100px;
  height: 100px;
}

• 以指定内容结尾：匹配特定后缀的图片（不单独用，建议结合目录或文件名）

img[src$=".png"][src*="logo"] {
  width: 100px;
  height: 100px;
}

3. 结合父容器限定范围 #

如果目标图片所在的父容器有唯一类名/ID（TYPO3模板通常会给不同区块分配独特标识），可以通过父元素缩小范围：

/* 假设父容器有class="home-hero" */
.home-hero img {
  width: 100px;
  height: 100px;
}

这种方式比地址匹配更稳定，不会因为图片地址变化失效。

额外提醒 #

• 样式中的宽高记得加单位（比如px），你之前的代码缺少单位，浏览器无法正确解析。
• 如果图片被<picture>标签包裹，选择器要调整为picture img[src*="target-image"]。

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