css - Wordpress - 在所有其他样式或某些样式之后排队样式

Question

我正在为 Wordpress 编写一个插件，我需要在前端对样式文件进行排队。但是当我这样做时，其他一些插件(如 vs_composer)会在我的插件之后添加它们的样式文件并覆盖我的代码。所以我认为有两种选择来处理这种情况。第一个是制定一些 CSS 规则 !important 我认为这不是一种专业的方式。另一种选择是在所有其他选项之后加载我的插件 CSS 文件；但有可能吗？我想这个目标无法通过在 wp_enqueue_style 中使用 $deps 参数来实现，因为如果依赖文件不存在，它不会加载文件。

Answer 1

您可以通过 Hook wp_head 来排队您的样式表, 它在前端的 head 标签中打印数据。

function enqueue_styles() {
  wp_enqueue_style( 'frontend-style', plugin_dir_url( __FILE__ ) . 'styles.css' );
}

add_action( 'wp_head', 'enqueue_styles' ); // default priority: 10

如果以后需要输出样式表，可以降低优先级。

例如，

add_action( 'wp_head', 'enqueue_styles', 20 ); 

或者，您可以将选择器更改为更具体，这样您的 CSS 规则优先于 vs_composer 的。

div {}
div.my-class {} /* more specific */
body div.my-class {} /* even more specific */

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. […] Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

— MDN source