javascript - 如何在全局范围内更改图像说明

Question

我如何在全局范围内否决 WordPress 上已设置样式的图像标题(颜色、大小)？

我已经尝试在前端的主题自定义 css 编辑器中使用如下代码，但所有字幕的颜色都没有改变，因为它们当时在后期编辑器中手动制作为白色，现在我希望在全局范围内使用它们全部为黑色:

body {
  background-color: #CCC;
}
.wp-caption-text {
  font-size: 8px;
  font-style: italic;
  color: #444;
}

<p style="text-align: center;">
<span style="font-size:12px;"><strong>Text here.<div id="attachment_1111" style="max-width: 500px" class="wp-caption aligncenter"><img src="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg" alt="Text here" width="500" height="650" class="size-full wp-image-1111 wp-caption aligncenter" srcset="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 500w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 225w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 450w" sizes="(max-width: 500px) 100vw, 500px" /><p class="wp-caption-text"><a href="https://www.google.com" target="_blank"><span style="color:#FFFFFF;"><span style="font-size:10px;"><em>google</em></span></span></a></p></div></strong></span>
</p>

我也尝试过使用它，但它什么也没做。我的字幕仍然是白色的。

color: #444 !important;

如有任何帮助，我们将不胜感激。

Answer 1

这里的主要问题是您更改了 .wp-caption-text 中文本的颜色但不适用于 div 中的链接 (然后是后续的 span )，根据您的 HTML，这是您的标题文本所在的位置。

您可以通过从 .wp-caption-text 更改选择器来实现颜色更改至 .wp-caption-text a span像这样:

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

<p style="text-align: center;">
	<span style="font-size:12px;">
		<strong>Text here.
			<div id="attachment_1111" style="max-width: 500px" class="wp-caption aligncenter">
				<img src="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg" alt="Text here" width="500" height="650" class="size-full wp-image-1111 wp-caption aligncenter" srcset="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 500w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 225w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 450w" sizes="(max-width: 500px) 100vw, 500px" />
				<p class="wp-caption-text">
					<a href="https://www.google.com" target="_blank">
						<span style="color:#FFFFFF;">
							<span style="font-size:10px;">
								<em>google</em>
							</span>
						</span>
					</a>
				</p>
			</div>
		</strong>
	</span>
</p>