WordPress主题Child CSS不覆盖Parent,即使之后加载了Child CSS

use*_*717 2 css wordpress wordpress-theming

我正在使用Shapely主题.

我将我的孩子主题的样式表排入队列:

function my_theme_enqueue_styles() {

    $parent_style = 'shapely-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' );
Run Code Online (Sandbox Code Playgroud)

在我的页面源代码中,我的子主题样式肯定是在父母之后加载的<head>.

<link rel='stylesheet' id='shapely-style-css'  href='http://mydomainname.com/wp-content/themes/shapely/style.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://mydomainname.com/wp-content/themes/child-theme-name/style.css?ver=4.7.3' type='text/css' media='all' />
Run Code Online (Sandbox Code Playgroud)

但是,在检查我的页面时,我的父样式仍然覆盖了我的子主题样式.见下面的截图:

在此输入图像描述

hun*_*tar 6

那是因为你的父主题的CSS具有更高的特异性.

如果.post-title使用相同的选择器替换父主题使用(.post-content .entry-content .post-title),它将覆盖父设置.不是因为它具有更高的特异性,而是因为它来自相同的选择器,所以它胜出.

已发布选择器的特定值:

.post-title = 0 0 1 0

.post-content .entry-content .post-title = 0 0 3 0