Bootstrap 4导航栏样式修改疑问：类选择器无效如何解决？

Hey there! Let's break down why your class-based selectors aren't working and how to fix this without leaning on IDs for every element.

First: The Root Issue - CSS Specificity & Load Order #

Bootstrap's default styles have built-in specificity, and if your custom CSS loads before Bootstrap's CSS file, your styles will get completely overwritten. Even if it loads after, simple selectors like .navbar might not have enough weight to beat Bootstrap's pre-defined styles.

Also, the IDs in your code (like #navBar) aren't for styling—they exist to power Bootstrap's JavaScript functionality (like toggling the collapsed mobile menu). You absolutely don't need IDs to style Bootstrap elements!

Fixing the Navbar Background #

The .bg-light class is setting the default background color, so your plain .navbar selector can't override it. Use a more specific selector to target it effectively:

/* Option 1: Combine the navbar and bg-light classes (uses !important only if necessary) */
.navbar.bg-light {
  background-color: #2d3436 !important;
}

/* Option 2: Add a parent selector for higher specificity (no !important needed) */
body .navbar.bg-light {
  background-color: #2d3436;
}

Styling the Navbar Links (.nav-link) #

Bootstrap's .nav-link has default styles for color, hover states, and active states. You'll need a more specific selector to override these:

/* Target all nav links in the navbar */
.navbar-nav .nav-link {
  color: #ffffff; /* Your custom text color */
  font-weight: 500;
}

/* Style the active (current) link */
.navbar-nav .nav-item.active .nav-link {
  color: #fdcb6e;
}

/* Style hover/focus states for links */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #b2bec3;
}

Key Takeaways #

• Load order is critical: Always link your custom CSS file after Bootstrap's CSS file in your HTML <head>.
• Specificity beats IDs: You don't need IDs for styling—just combine class selectors (like .navbar-nav .nav-link) to boost specificity and override Bootstrap's defaults.
• IDs are for functionality: The #navBar ID in your code only exists to make the collapse toggle work, not for styling purposes.

Give these changes a shot, and your navbar styles should apply correctly!

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