如何阻止 WordPress 生成内联样式 css？

Question

我在 WordPress 生成图像元素时遇到问题。当我放置图像时没有问题，但是当我需要该图像作为链接时，它会添加“宽度：0！重要”作为内联样式。有没有办法防止这种情况发生，或者至少阻止我在 CSS 文件中覆盖它的 !important 部分？

这是生成的代码：

没有链接：

<figure class="aligncenter size-large">
    <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px">
    <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>

带有链接：

<figure class="aligncenter size-large">
   <a href="LINK">
       <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px" style="width: 0px !important;">   
   </a>
   <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>

这个问题给我的帖子页面带来了问题，而且每当 WP 必须为锚标记内的图像生成代码时，我也会在网站的每个其他页面中使用广告管理插件。

我尝试寻找有同样问题的人，但我找到的所有解决方案都是针对没有 !important 部分的内联代码。

Answer 1

您可以尝试使用 CSS 来覆盖 !important 规则。虽然覆盖 !important 声明通常很棘手，但有时您可以使用更具体的 CSS 选择器或将 !important 添加到您自己的 CSS 中来覆盖内联样式。

figure a img {
  width: auto !important;
}

此 CSS 规则专门针对位于图形元素内的锚标记内的 img 元素。它尝试覆盖内联样式设置的宽度。但是，这种方法的有效性可能会有所不同，具体取决于 CSS 选择器的特殊性以及应用样式的顺序。