为何本地CSS无法关联HTML？自定义样式失效问题求助

Let's break down the possible issues and fixes step by step—since your images load fine, path problems are probably not the main culprit, but let's cover all bases:

1. Fix the Obvious Typo in Your Inline CSS #

First, I spotted a simple mistake in your inline style code: you used .body (a class selector) instead of body (the actual HTML tag selector). That’s why the background image didn’t show up—there’s no element on your page with a body class! Correct it to:

body { 
  background-image: url('img/SANDLOTS_Logo_DESIGN_08242016.jpg'); 
}

2. Verify Your External CSS File is Actually Loading #

Even though the path looks correct, let’s confirm the browser is pulling in home.css:

• Open your browser’s DevTools (press F12 or Ctrl+Shift+I)
• Switch to the Network tab, then reload the page
• Look for home.css in the file list:
  • If it shows a 404 status: Double-check the filename (case matters! Is it home.css or Home.css? OS like Linux/macOS is case-sensitive)
  • If it loads with a 200 status: Move on to the next checks

3. Check for CSS Specificity & Bootstrap Overrides #

Bootstrap uses pretty specific selectors, so your custom styles might be getting overridden even though you loaded your CSS after Bootstrap:

• For example, if you’re styling a .jumbotron, Bootstrap uses .container .jumbotron which has higher specificity than just .jumbotron
• Fix this by making your selectors more specific, like:

  .container .jumbotron {
    /* Your custom styles here */
  }
  

• As a last resort, you can use !important (try to avoid this long-term, as it makes debugging harder later):

  .jumbotron {
    background-color: #fff !important;
  }
  

4. Scan for CSS Syntax Errors #

A tiny typo (like a missing } or ;) can break your entire CSS file. Use your browser’s DevTools to check:

• Go to the Elements tab, then the Styles pane—if your custom styles are struck through with a warning icon, there’s a syntax issue
• Manually scan your home.css for missing brackets, semicolons, or invalid property names

5. Clear Browser Cache #

Sometimes browsers cache old versions of your CSS file, so even if you fixed the issue, you’re still seeing the old code:

• Force a hard refresh: Ctrl+F5 (Windows/Linux) or Cmd+Shift+R (macOS)
• Or, add a query string to your CSS link to bust the cache temporarily:

  <link href="home.css?v=1.0" rel="stylesheet">
  

Let me know if any of these steps fix your issue—happy to help debug further if needed!

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