WordPress子主题child-styles.css后加载仍被Bootstrap样式覆盖求助

Let’s walk through the most common reasons this happens, even when your stylesheet loads after Bootstrap:

1. CSS Specificity Is the #1 Culprit #

CSS doesn’t only go by load order—selector specificity (the "weight" of your rule) determines which style wins. Here’s a quick example:

• Bootstrap might use a specific selector like .navbar a.nav-link to style navigation links
• If your child theme only uses a generic a or a:link selector, Bootstrap’s rule has higher specificity and will override yours, no matter which loads later.

Fix this by matching or boosting the specificity of your selector. If Bootstrap uses body .container a, you could use body .container .my-custom-section a (more specific) or even the exact same selector as Bootstrap (since your styles load later, they’ll win when specificity is equal).

2. Your Styles Aren’t Targeting the Right Elements #

Double-check that your child theme styles are targeting the exact elements Bootstrap is styling. For instance:

• Bootstrap might style links with the .text-primary class, but you’re writing rules for plain a tags
• Or the links in question are nested inside a parent element Bootstrap has already styled (like .card-body a)

Use Chrome DevTools to inspect the link: look at the "Styles" tab to see exactly which Bootstrap selectors are applied to it, then write your child theme styles to match that structure.

3. Stale Browser Cache Is Tricking You #

Even if your page source shows the correct load order, your browser might be caching an older version of child-styles.css. Try these fixes:

• Force-refresh the page with Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac)
• Clear your browser’s cache entirely
• Flush any WordPress caching plugins you’re using (like WP Rocket or W3 Total Cache)

4. Bootstrap Uses !important (Rare, But Possible) #

While Bootstrap avoids !important in most core styles, some utility classes or edge-case rules might use it. If you see !important next to Bootstrap’s link color rule, you have two options:

• Add !important to your child theme style (use this as a last resort—it makes future debugging harder)
• Refactor your selector to be more specific than Bootstrap’s (this will beat !important without adding it yourself)

5. Double-Check Your Enqueue Logic #

Even if the source looks right, confirm your child theme’s functions.php is enqueuing styles correctly with dependencies. For example:

function my_child_theme_enqueue_styles() {
    // Enqueue Bootstrap first
    wp_enqueue_style('bootstrap-style', get_template_directory_uri() . '/path/to/bootstrap.css');
    
    // Enqueue child styles *after* Bootstrap
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/child-styles.css', array('bootstrap-style'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');

The third parameter (array('bootstrap-style')) ensures your child styles load after Bootstrap—you said this is working, but it’s worth verifying the handle names match exactly.

内容的提问来源于stack exchange，提问作者digitalborn