儿童主题css没有覆盖父母

时间:2017-02-08 20:34:10

标签: php css wordpress parent-child

我创造了二十七个主题的儿童主题。在孩子的主题文件夹中,我有一个" style.css"和一个" functions.php"文件。在style.css文件里面我有:

/* 
Theme Name: Personal_theme
Theme URI: http://wordpress:8888/
Description: This is a child theme of twentyseventeen
Author: My name
Author URI: ...
Template: twentyseventeen
Version: 0.1;
*/

.entry-title {
    color: blue;
}

和functions.php内部:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get("Version")
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

如果我添加&#34;!important!&#34;对于风格,它的工作原理,它变成了蓝色。如果我使用检查器工具,我可以看到父样式后面正在加载子样式表,但样式被父项覆盖。我是Wordpresss的新手,在functions.php中的任何参数都是错误的吗?我需要改变什么?

3 个答案:

答案 0 :(得分:3)

这个问题很可能是由CSS选择器specificity引起的。从本质上讲,父css规则的定制范围比您分配的规则更精确。您可以使用比父css更具体的规则来接管您的css,或者使用相同的规则,在这种情况下,您的css将优先使用,因为它将在以后加载。

答案 1 :(得分:0)

尝试添加

 @import url("..twentyseventeen/style.css");

以上.entry标题位于子样式表的顶部。这与模板名称一起使用。希望这会有所帮助。

答案 2 :(得分:0)

尝试将您的功能更新为

<?php
    function my_theme_enqueue_styles() { 
      wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    }

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

之后请提供控制台中实际加载内容的屏幕截图。

不确定为什么你创建了一个父式的变量,但你可以继续使用它。

希望这有帮助