如何覆盖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

添加！重要以覆盖：

.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，则有可能在更新后将其切换回原来的CSS。

对于嵌入式选项：将style="color:#fff;"添加到要更改的元素。这将覆盖所有外部CSS。