css - 覆盖 Wordpress 子主题中的样式

Question

我正在努力定制这个主题:http://themeforest.net/item/ultimate-directory-responsive-wordpress-theme/8043893

根据我在许多网站上使用的协议(protocol)，我创建了一个子主题。

在这个子主题中，我有一个包含以下代码的 style.css 文件:

@import url("../ultimate-directory/ud-assets/css/custom.css");
@import url("../ultimate-directory/style.css");

#header {
width: 100%;
border-bottom: 3px solid;
background-color: #fff !important;
}

我在子主题中也有一个 functions.php 文件，代码为 `

<?php
  add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
  function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
  } 
?>

但是子主题中的 style.css 并没有覆盖父样式。我已经与主题开发人员来回交流，但他们没有提供解决方案。父主题有一个 style.css 但里面什么也没有，只有一条评论说所有样式都在 ud-assets 文件夹内的 css 文件夹中。我试图覆盖的样式表称为 custom.css，这就是我导入它但我的更改仍然被忽略的原因。

这是父主题 header.php 中的代码，它调用了我认为的样式:

$cp_preloader_status = get_option(THEME_NAME_S.'_enable_preloader'); 

if( $cp_preloader_status == 'enable' ){
?>
<?php $preloader = get_option(THEME_NAME_S.'_preloader_gif','1'); ?>
<style>
/* Loader */
.loader { background: url("<?php echo CP_THEME_PATH_URL; ?>/ud-assets/img/preloaders/<?php echo $preloader; ?>.gif") no-repeat scroll 50% 50% rgb(249, 249, 249);height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 99999;}

<?php if ( is_page( '563' ) || is_page( '1018' ) || is_page( '1021' ) || is_page( '966' ) || is_page( '812' ) || is_page( '825' ) || is_page( '827' ) || is_page( '961' ) ){ ?>
#main {
margin: 0 !important;   
}
<?php } ?>
</style>
<?php } ?>

Answer 1

上面的代码没有加载任何 css 文件，但它确实提供了一些 css 规则。

您有几个选项可以实际覆盖父文件，这些文件可能比您尝试入队的文件晚加载，因此后面的规则将适用(取决于特定的 css 规则和 的使用!重要等)。

1. 添加您的操作以便稍后加载(实际上您应该检查页面源以确定是否是这个问题)

   add_action( 'wp_enqueue_scripts', 'childtheme', 1000 );
   

2. 如果您要进行较小的更改，请为 css 选择器使用特定协议(protocol) 例如nav ul li.custom 将在具有自定义类的导航元素中选择 li。如果您想稍后设置嵌套 ul 的样式，请不要使用 nav ul li。

3. 将所有样式出队并再次入队(最好不要加载超过 1 个 css 文件

   function dequeue_css(){
   
    global $wp_styles;
   
           foreach( $wp_styles->queue as $name ) :
                   wp_deregister_style ($name);
                   wp_dequeue_style ($name);           
           endforeach; 
   
           // now enqueue css files
   }
   add_action('wp_enqueue_scripts', 'dequeue_css',100);