子主题CSS优先级问题，不使用！important

我将WordPress网站更改为使用子主题，但父主题样式的优先级高于我对子主题CSS所做的任何更改。我可以使用解决此问题!important，但这是一个不完整的解决方案，子主题应该作为站点的第一资源。

例如，在我的网站中，.wp-caption使用!important标记所包含的边框与背景颜色相同，但没有该标记将无法使用。

这与functions.php文件有关吗？

这是我的PHP文件的内容：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

css child-theme

— 达科夫
source

您如何添加子主题的style.css？

— 米洛

我使用的是WordPress在这篇文章中推荐的系统：codex.wordpress.org/Child_Themes

— Dharkov

看起来您的子主题样式表加载得很早，您是在排队还是直接将link标签添加到标题？它应该排队出现在父样式表之后，因此您可以使用相同的CSS选择器覆盖父样式，而无需！important或更高的特异性。请参阅下面的兰比洛答案。

— 米洛

Answers:

尝试将子主题的CSS入队，如下所示：

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

请注意以下几点：

1）将PHP_INT_MAX作为优先级，以便最后运行

2）get_stylesheet_directory_uri（）与get_template_directory_uri（），这将指向子主题的模板文件夹而不是父主题。

我在那里也添加了一个子文件夹，/styles/因为我通常将CSS保留在主题的子文件夹中。

3）然后array( 'parent-style' )使子CSS具有父CSS作为依赖项，其效果是将父主题放在首位，然后将子主题CSS放在首位。因此，父主题中已经存在于子主题中的任何内容都将覆盖父主题的版本。

— 兰比洛
source

非常感谢，新阵列可以完美工作，而且更干净，更清晰。

— Dharkov

仍然无法正常工作..太奇怪了。至少围绕26个主题进行40分钟和20个教程。无法覆盖样式。body, select { color: red !important; font-size:200% !important; }

— roberthuttinger

继续并发布一个Codepen，我们来看看。

— 朗比略

PHP_INT_MAX在我的情况下解决了它。它强制将孩子的css加载到父母的css之后。

— mefiX

roberthuttinger您是否解决了这个问题？

— gjnave

TLDR答案：每个参数的第一个参数wp_enqueue_style()都不应保留为“父样式”和“子样式”。应将其重命名以匹配父主题及其子主题的名称。

问题

如果不重命名参数，则会再次使子主题排队，这可能导致规则在Firebug中出现两次，并更改错误值而没有明显效果，这可能会诱使您认为子规则不起作用。覆盖父项。

期望

子主题上的Codex页面正确地说，如果您什么也不做，则子CSS会自动链接。它可以，但仅此而已。CSS工作流有些不同：您要覆盖而不是替换。这是合乎逻辑的（它与其他主题文件一样工作），但可能会有注释。

解

重命名参数。我不喜欢它下面得到（略）更多的控制，笔记，你应该更换twentysixteen和twentysixteen孩子与你的主题和子主题的名称：

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

（还要注意，您在此操作中无法控制某些（全部？）WP插件的链接顺序。之后便会链接。）

快乐的选择者狩猎;）

— 亨里克·埃兰森（Henrik Erlandsson）
source

在我看来，这是正确的答案，因为它正确使用了Wordpress框架，而没有强加任何东西。

— 准

您可以在子主题的CSS中使用更具体的选择器，使其优先。

所以代替：

.wp-caption {
     背景：＃2d2d2d！重要；
}

采用：

.entry .wp-caption {
     背景：＃2d2d2d;
}

您还需要确保将子主题样式表（如果尚未加入）放在functions.php文件中。

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

— Twodogstar
source