如何覆盖 wp-includes/css 目录中的默认 .css

Question

如何覆盖 wp-includes 目录中的 .css 文件？

我必须更改 wp-block 的图像标题的颜色。

这应该通过将其添加到我的主题的 style.css 来完成：

.wp-block-image figcaption {
    color: #fff;
}

但是在 wp-includes/css/dist/block-library/style.min.css 中已经有这个元素的规则，它覆盖了我的规则。

我不想使用 !important，因为它不是 Google 推荐的，还有其他方法可以覆盖这些规则吗？

谢谢

Answer 1

添加 !important 以覆盖：

.wp-block-image figcaption {
    color: #fff!important;
}

如果关键字 !important 已在您尝试覆盖的样式中使用，那么您需要在您要覆盖的 css 之后包含您的 css，并且具有同样特定的选择器，或者更特定的选择器并且还包括 !重要的关键词

编辑：为避免使用 !important，您可以按照我的回答的第二部分进行操作。

Answer 2

如果您确保您的自定义样式表包含在wp-includes/css/dist/block-library/style.min.css 之后，无论如何它都会被覆盖。这就是为什么它被称为“层叠样式表”。

为确保您的样式表在默认样式表之后加载，请将其作为依赖项添加到您的样式表中。

像这样将你的样式表排入队列：

wp_enqueue_style(
    'your-custom-stylesheet-handle', 
    'path/to/your/custom/stylesheet.css', 
    ['wp-block-library'] 
);

您也可以在其他选择器之前放置一个选择器。这样它的嵌套更深，优先级更高：

body .wp-block-image figcaption {
    color: #fff;
}

Answer 3

由于您不想使用!important，因此您需要编辑现有的 CSS 或使用内嵌样式。

如果您更新现有的 CSS，则可能会在更新后将其切换回来。

对于内联选项：将style="color:#fff;" 添加到要更改的元素。这将覆盖任何外部 CSS。