如何在WordPress中全局覆盖已自定义样式的图片说明（颜色、尺寸）

嗨，我来帮你搞定这个图片说明样式覆盖的问题！

你之前的CSS没生效，核心原因是你的图片说明文本被两层带内联样式的<span>嵌套包裹着，而且内联样式的优先级本来就比外部CSS高——哪怕你给.wp-caption-text加了!important，也覆盖不了更内层<span style="color:#FFFFFF;">的白色设置。

有效解决方案 #

直接定位到那个带白色内联样式的内层元素，用更精准的选择器配合!important来强制覆盖：

/* 精准覆盖图片说明里的白色文本，同时设置你需要的样式 */
.wp-caption-text a span[style*="color:#FFFFFF"] {
    color: #444 !important;
    font-size: 8px !important;
    font-style: italic !important;
}

如果你的所有图片说明结构都类似（都是<a>标签里嵌套<span>），也可以用更简洁的选择器：

.wp-caption-text a span {
    color: #444 !important;
    font-size: 8px !important;
    font-style: italic !important;
}

额外建议 #

这次解决后，建议你以后不要再手动给图片说明加内联样式了——可以考虑：

• 修改主题的图片说明模板文件，把默认样式直接设置成你需要的黑色、字号等
• 用WordPress的自定义字段或者专门的图片管理插件统一控制样式，避免后续再出现这种需要强行覆盖内联样式的麻烦

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