Hey there! It’s so frustrating when one CSS style works perfectly (your background color) but another refuses to cooperate—let’s break down the most common reasons this happens and how to fix it:

• Check for CSS Priority Conflicts
  This is the #1 culprit. If there’s a more specific CSS selector targeting your h1 (like .header h1, h1.featured, or even an inline style="color:..." attribute directly on the h1 tag), it’ll override your basic h1 { color: ...; } rule.
  To confirm: Right-click your h1 in the browser, select Inspect, and look at the Styles panel. If your color rule is crossed out, you’ll see which higher-priority selector is replacing it. You can either adjust the specificity of your rule (e.g., use body h1 instead of just h1) or add !important temporarily to test (though try to avoid overusing !important long-term).

• Double-Check for Syntax Errors
  Even a tiny typo can make a single CSS rule fail while others work. Did you miss a semicolon at the end of the color line? Misspell the color value (e.g., grean instead of green, or #f0f0f instead of #f0f0ff)? Or accidentally close the curly brace before the color rule?
  Example of a broken rule:

  h1 {
    background-color: yellow
    color: red; /* Missing semicolon on the line above breaks this! */
  }
  

• Clear Browser Cache
  Sometimes your browser hangs onto an old version of your CSS file that doesn’t include the color change. Try forcing a hard refresh with Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac) to load the latest version of your stylesheet.

• Verify Your Selector Is Correct
  It sounds silly, but it happens! Did you accidentally write h2 instead of h1? Or maybe a class name if you’re using one (e.g., .heading instead of h1)? Double-check that your selector matches exactly what’s in your HTML.

• Rule Out Odd Edge Cases
  Rarely, other properties can make your text color appear not to work:

  • A text-shadow set to the same color as your background can hide the text color.
  • A filter property (like grayscale(100%)) might override the text color.
  • If your h1 is inside an element with color: inherit and the parent has a color that’s the same as the background, it’ll look like your rule isn’t working.

If none of these fix the issue, sharing a short snippet of your HTML and CSS code would help narrow things down even further!

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