媒体查询选择器失效：样式被划掉、修改未生效的技术求助

Hey there! Let's break down why your media query styles are getting struck through and not working as expected—plus how to fix this properly.

Common Causes & Solutions #

1. CSS Rule Order is the Top Culprit #

CSS follows the "last declared wins" rule when selectors have identical specificity. Your original #points_nav li selector and the one inside the media query have exactly the same specificity. That means if your original CSS code comes after the media query, it will override the media query styles every time, which is why you see those styles crossed out.

Fix: Move your media query below the original CSS rule. This way, when the screen size condition is met, the media query styles will take precedence:

/* Original styles first */
#points_nav li{ 
  width: 2rem; 
  height: 2rem; 
  cursor: pointer; 
  margin: 0 1rem; 
  position: relative; 
}

/* Media query comes after */
@media only screen and (max-width: 500px){ 
  #points_nav li{ 
    width: 1rem; 
    height: 1rem; 
  } 
}

2. Cache Issues Are Likely Causing "Random" Failures #

Browsers cache CSS files to speed up page loads, but this can mean it's still using an old version of your stylesheet that doesn't include your media query fix.

Fix:

• Force a hard refresh of your browser:
  • Windows/Linux: Ctrl + Shift + R
  • Mac: Cmd + Shift + R
• Add a version parameter to your CSS file URL (e.g., <link rel="stylesheet" href="styles.css?v=1.2">). This tells the browser to fetch the updated file instead of relying on the cached one.

3. Boost Specificity (If Order Adjustment Isn't Enough) #

If moving the media query doesn't work (maybe there's another conflicting rule elsewhere), you can intentionally increase the specificity of your media query selector to match or exceed the overriding rule. Your workaround using #container_div #points_nav li works because it has higher specificity than just #points_nav li.

As a last resort, you can use !important (though try to avoid it if possible—it can make future CSS maintenance trickier):

@media only screen and (max-width: 500px){ 
  #points_nav li{ 
    width: 1rem !important; 
    height: 1rem !important; 
  } 
}

4. Check for Hidden Conflicting Rules #

Open your browser's DevTools (F12 or right-click > Inspect), go to the Elements tab, and select one of the li elements. Look at the Styles panel to see exactly which rules are being applied and which are crossed out. This will show you if there's another selector (like an inline style or a more specific class/id combination) overriding your media query.

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