Question

有一个主题有各种CSS文件，我从那个主题创建了一个儿童主题。

然后我创建了一个新页面，并从functions.php添加了css文件：

function my_theme_enqueue_styles() {
    if ( is_page_template( 'new-page.php' ) ) {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-style.min.css');
    }
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

因此，为了覆盖特定元素的主题中的其他CSS文件，每次我想覆盖它们时都必须使用!important。

像：

selector{
    property1: value !important;
    property2: value !important;
    ..
}
..

那么有一种方法可以在</head>之前的某个地方包含该文件吗？

Answer 1

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX);
    function my_theme_enqueue_styles(){

        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/css/page-style.min.css', array('parent-style') );
    }

我在function.php中使用此代码会有效。通过此代码，child theme可以访问所有parent theme css，并可以添加新的css＆amp;覆盖父主题css。首先优先考虑child theme css。所以写!important不是必要的。

Answer 2

请尽量使用！important，而是使用 css指定。

编辑：通过使用CSS规范，控制css文件的加载顺序变得不必要，btw可以通过某些浏览器或缓存插件进行不同的处理...... < /强>

一般CSS规则： id引用比类引用更强，类引用比html元素引用更强。例如，如果您有：

<a href="" id="myID" class="myClass">

和这个css

#myID{color:red;} .myClass{color:blue;} a{color:black;}

元素的颜色为红色

因此，如果要覆盖的css具有：

selector{color:red;}

在你的覆盖css中定义：

body selector{color:blue;}

并且这个新的选择器将自动强于另一个，覆盖红色，并以蓝色显示文本。不需要“！important”

现在你可以选择像
这样的选择器了
#MyID.myClass div > #MyID.myClass div > #MyID.myClass a.myClass a#MyID.myClass body article .content #myID.myClass

等

因此，您定义元素越具体，此css定义就越强于其他元素。

解释：CSS特性定义了ID选择器具有例如权重5，类选择器权重3和html选择器权重1.因此，通过连接它们，您可以在相同的css文件中创建新的css选择器，其权重比之前定义的更多，因此不必使用丑陋的“！important”< / p>

如何覆盖Child Theme中的CSS文件？

2 个答案: