子Style.css不会覆盖Assets/css/main.css中的父主题样式

时间:2017-04-12 作者:Blaine

我知道以前有人问过这个问题,我在这里已经提到了以下问题:

Child Theme Not Overriding Parent Theme

some things in child theme css not overriding parent

CSS in child theme not overriding the parent theme [closed]

Function in Child Theme not overriding Parent Theme function [duplicate]

这些都不能解决我的特殊问题。

我遇到的问题是,父主题的样式表不位于传统themedirectory/style.css. 他们做了所有的造型themedirectory/assets/css/main.css. 因此,我尝试创建子主题,并将以下代码添加到functions.php 文件:

<?php
function my_theme_enqueue_styles() {

    $parent_style = \'maya-reloaded-style\';
        wp_enqueue_style( $parent_style, get_template_directory_uri() . \'assets/css/main.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\' );
    ?>
我将父主题的目录更新到了当前父主题的位置,但我的新样式表仍然存在一个问题,即没有覆盖父主题的子主题。似乎父样式表是在子样式表之后加载的。当我用Firefox检查元素时,它显示父样式表正在覆盖子样式表。

我做错了什么?我如何解决这个问题,使子样式表在父样式表之后加载?

UPDATE

下面是父文件(main.css):

/*
Theme Name: Maya Reloaded
Description: Onepage, Multipage and Mutipurpose WP Theme
Theme URI: http://themeforest.net/user/unCommons/portfolio
Author: unCommons Team
Author URI: http://www.uncommons.pro
Version: 1.1
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, translation-ready
*/


/* Main Style -> assets/css/main.css */
下面是子文件(style.css):

/*
 Theme Name:   Maya Reloaded - Child
 Theme URI:    http:www.girlpowerhour.com/Maya-child
 Description:  Child theme for the Maya Reloaded theme
 Author:       Me
 Author URI:   http:www.virgsolutions.com
 Template:     maya-reloaded
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, pink
 Text Domain:  maya-reloaded-child
*/

body{
    font-size:18px;
}

.larger-font{
    font-size:18px;
}

.about-header{
    font-size:24px;
}

/* Header */
.un-header-menu-white .main-menu  li  a{
    color:#EF1066;
}

2 个回复
SO网友:Desperado

尝试使用以下方法。在add\\u action()调用中,添加优先级并告诉它是否解决了问题。

add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\', 99 );

SO网友:Jonathan Hodgson

这可能是因为样式表中的规则具有更高的特异性。添加!important 查看一条css规则,然后看看它是否有效。

你不应该用!important 除非你必须这样做,但它会告诉我们这是否是问题所在。

如果是,请阅读本文:https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s