css - 子主题不覆盖父 CSS

Question

我已经创建了 Renovation 主题的子主题。在 child 的主题文件夹中，我有一个“style.css”和一个“functions.php”文件。我的 style.css 看起来像这样:

/*
Theme Name: Renovation Child
Theme URI: http://renovation.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 2.0.4
Template: tm-renovation
*/

/*
 * @charset "UTF-8";
*/

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 65px!important;
    padding-bottom: 35px!important;
}

我的 functions.php 看起来像这样:

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION

if ( !function_exists( 'renovation_enqueue_scripts' ) ):
    function renovation_enqueue_scripts() {
        wp_enqueue_style( 'renovation-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css' );
    }
endif;
add_action( 'wp_enqueue_scripts', 'renovation_enqueue_scripts' );

// END ENQUEUE PARENT ACTION

取消检查器我看到父 css 首先被加载，它看起来像这样:

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 30px!important;
    padding-bottom: 35px!important;
}

我的 CSS 在父 CSS 之后加载，它看起来像这样，除了它都被划掉了:

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 65px!important;           <-- MY CHANGE
    padding-bottom: 35px!important;
}

我已经阅读了很多关于特异性的线程，我注意到我的 css 和父 css 是相同的，除了我所做的“padding-top”更改。由于 child 是最后加载的，我希望我的 css 优先，但事实并非如此。我的 css 在检查器中被划掉了，正在使用父级。

这对我来说似乎不对，我希望有人能澄清我对父/子关系的理解并帮助我解决这个问题。谢谢。

Answer 1

如果您只打算覆盖一个元素而不将其应用于多个元素，那么最好使用 id 而不是类。 id 总是覆盖一个类。