Question

我正在使用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' );

在我的页面源代码中，我的子主题样式肯定是在<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' />

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

Answer 1

那是因为您的父主题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

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

1 个答案: