自定义CSS元素互相覆盖问题求助

The Root Cause #

Hey there, let's break down why your CSS is conflicting. First off, you have a missing closing curly brace in your min-width: 992px media query. This mistake causes the subsequent min-width: 768px query to be nested inside it, which completely messes up the CSS cascade and leads to unexpected style overrides.

Corrected CSS Code #

Here's the fixed version with proper syntax and targeted rules to eliminate conflicts:

/* Adjust mobile menu position for screens 767px and smaller */
@media (max-width: 767px) {
  .mob-nav {
    top: 25% !important;
  }
}

/* Adjust logo margin for desktop screens (992px and above) */
@media (min-width: 992px) {
  .right-menu .logo img {
    margin-top: -15px !important;
  }
}

/* Adjust logo margin for tablet screens (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .right-menu .logo img {
    margin-bottom: -5px !important;
  }
}

Key Improvements Explained #

• Fixed Syntax: Added the missing } to close the 992px media query, so each rule set operates independently and targets its intended screen range.
• Targeted Screen Scope: Modified the 768px query to include and (max-width: 991px)—this ensures it only applies to tablet-sized screens, preventing it from overlapping with the desktop (992px+) logo rule.
• Cleaner Cascade: By narrowing the scope of each media query, we eliminate situations where multiple rules fight to style the same element for overlapping screen sizes.

A Quick Note on !important #

While !important gets the job done here, try to use it sparingly. If you can boost your selector specificity (for example, adding a parent theme class like .your-theme-name .right-menu .logo img), you can often avoid needing !important entirely—this makes your CSS much easier to maintain over time.

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