如何用JavaScript为Divi主题图片下的标题自动添加CSS类

完全可以用JavaScript自动识别并添加CSS类，以下是针对你提供的HTML结构的解决方案：

核心代码 #

// 定位所有图片链接内的斜体标题并添加CSS类
document.querySelectorAll('.dmpro_timeline_item_description a:has(img) em').forEach(caption => {
  // 替换成你需要的CSS类名，比如这里用'image-caption'
  caption.classList.add('image-caption');
});

代码说明 #

• 选择器.dmpro_timeline_item_description a:has(img) em精准定位目标元素：只选中dmpro_timeline_item_description容器下，包含图片的<a>标签里的斜体文本，避免误选其他无关的<em>元素
• 遍历所有匹配到的元素，通过classList.add为每个斜体标题添加指定的CSS类

注意事项 #

• 执行时机：如果页面内容是动态加载的（比如滚动加载、AJAX加载），要确保代码在内容渲染完成后执行。可以把代码放在DOMContentLoaded事件回调里，或者Divi主题提供的自定义JS区域（「主题选项」→「集成」→「添加到结束前」）
• 类名替换：把代码里的image-caption改成你实际需要使用的CSS类名称即可
• 结构兼容性：如果后续HTML结构有调整，需要对应修改选择器，保证能正确匹配目标元素

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