WordPress 父主题与子主题的样式覆盖模式

在 WordPress 主题开发中，子主题 (Child Theme) 是修改主题的最佳实践。

但很多人搞不清楚：父主题和子主题的 CSS 是怎么加载的？哪个会覆盖哪个？

下面给大家讲清楚 👇

📌 父主题与子主题的关系

• 父主题 (Parent Theme)：完整的主题，包含所有模板、函数、CSS。

• 子主题 (Child Theme)：继承父主题，只需写修改部分，不会影响父主题。

加载顺序上：

1. 父主题的 style.css 先加载

2. 子主题的 style.css 后加载

因为 CSS 遵循 “后写的覆盖前写的” 原则，所以：

👉 子主题 CSS 可以覆盖父主题的样式。

⚙️ WordPress 的加载机制

默认情况下，WordPress 会自动加载：

• 父主题：/wp-content/themes/parent/style.css

• 子主题：/wp-content/themes/child/style.css

而我们在 functions.php 里手动注册的方式，最好写成：

<?php
add_action('wp_enqueue_scripts', function() {
    // 父主题样式
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // 子主题样式，依赖父主题
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parent-style')
    );
});

这样 WordPress 会保证：

1. 父主题 CSS 先输出

2. 子主题 CSS 在后面，能覆盖父主题

🖌️ 覆盖的模式

1. 选择器优先级

   如果父主题和子主题写的是同一个选择器：

body { background: white; }  /* 父主题 */
body { background: black; }  /* 子主题 */

1. 👉 子主题覆盖父主题，最终背景是黑色。

2. 选择器更精确

   如果子主题写了更精确的选择器：

.header h1 { color: red; }   /* 父主题 */
header.site-header h1 { color: blue; }  /* 子主题 */

2. 👉 子主题优先，因为选择器更具体。

3. 父主题里用了 !important

   如果父主题用了 !important，子主题必须更强的选择器或同样加 !important 才能覆盖：

.header { color: red !important; }   /* 父主题 */
.header { color: blue; }             /* 子主题 → 无效 */
.header { color: blue !important; }  /* 子主题 → 生效 */

🚀 为什么用子主题？

• 父主题更新时不会丢失修改

• 子主题只写需要覆盖的部分，维护成本更低

• 结构清晰，父主题负责核心框架，子主题负责定制样式

✅ 总结

1. WordPress 会先加载父主题 CSS，再加载子主题 CSS

2. 后加载覆盖前加载，所以子主题天然比父主题优先

3. 如果父主题用了 !important，子主题需要更强的规则才能覆盖

4. 正确的做法是：用 wp_enqueue_style 声明依赖关系，确保子主题在父主题之后加载

👉 结合我们前面讲的 动态版本号机制，你就能做到：

• 父主题 CSS 走 CDN，高速缓存

• 子主题 CSS 动态加时间戳，保证修改立即生效

• 加载顺序正确，子主题始终覆盖父主题