Bootstrap布局中外联自定义CSS不生效，内嵌style标签正常问题求助

Hey there, let's work through why your custom style.css isn't taking effect when linked via a <link> tag, but works fine when you put the rules directly in a <style> tag. Since you've confirmed the file path is correct, here are the most common fixes to try:

• Double-check your CSS link order
  Bootstrap's default styles need to load before your custom CSS. If you load your style.css first, Bootstrap's later-loaded rules will override yours. Make sure your HTML link structure looks like this:

  <!-- Load Bootstrap first -->
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
  <!-- Then your custom styles -->
  <link rel="stylesheet" href="path/to/style.css">
  

  This is the #1 culprit for this kind of issue—don't skip checking this!

• Clear your browser cache (hard refresh)
  Browsers love caching CSS files to speed up load times, which means even if you fixed the link order, it might still be loading an old, broken version of your style.css. Do a hard refresh to force it to grab the latest file:

  • Windows/Linux: Press Ctrl + Shift + R
  • Mac: Press Cmd + Shift + R
    You can also open your browser's dev tools (F12), go to the Network tab, and check the "Disable cache" box before refreshing to avoid cached files entirely.

• Boost your selector specificity
  Even if your CSS loads after Bootstrap, if Bootstrap uses a more specific selector, its rules will still win. For example, if Bootstrap uses .container .btn and you only use .btn, Bootstrap's style will override yours.

  • Make your selectors more specific: Instead of #my-custom-box, try body #my-custom-box or wrap it in a parent class you control (like .my-app-container #my-custom-box).
  • As a last resort, use !important (but try to avoid this long-term—it makes future debugging harder):

    #my-custom-box {
      background-color: #ff0000 !important;
    }
    

• Check for syntax errors in style.css
  A missing semicolon, unclosed curly brace, or misspelled property can break your entire CSS file. Open your style.css in your browser's dev tools (go to Sources > find your style.css file) and look for red error markers—those will point you to broken code.

• Verify your server is serving the file correctly
  If you're using a local server (like VS Code's Live Server, XAMPP, etc.), check the Network tab in dev tools:

  • Find the style.css request and look at the status code—it should say 200 OK.
  • If it's a 404 error, double-check your relative path (e.g., if your HTML is in a pages folder, you might need ../style.css instead of style.css).

Start with the first two fixes (link order and cache) since they're the quickest to test. If those don't resolve the issue, move on to checking selector specificity and syntax errors.

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