求助：Bootstrap导航栏文字颜色无法修改（仅内联CSS生效）

Hey there, I totally get where you're coming from—Bootstrap's built-in styles can be stubborn when it comes to overriding them, especially with navbar links. Let's break down why this is happening and how to fix it:

Why Your CSS Isn't Working #

Bootstrap uses more specific CSS selectors for its navbar links, which means your generic a selector gets ignored. By default, Bootstrap has something like this in its stylesheet:

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

This selector has higher specificity than just a, so your a { color: #ff6347; } rule doesn't take effect.

Solutions to Try #

1. Use a Matching Specificity Selector #

Update your style.css to target the navbar links directly with a selector that matches Bootstrap's specificity:

.navbar-light .navbar-nav .nav-link {
  color: #ff6347;
  font-size: 20px;
}

Since your custom CSS file is loaded after Bootstrap's (which you already did correctly in your HTML), this rule will override the default styles.

2. Target Custom Classes (Like Your text-blue Links) #

If you only want to style specific links (like the ones with text-blue), make your selector more specific than Bootstrap's:

.navbar-light .navbar-nav .nav-link.text-blue {
  color: #007bff; /* Replace with your desired blue */
}

This ensures your custom class takes precedence over Bootstrap's default styles.

3. Double-Check Your CSS Load Order #

Just to confirm—you already have this right, but it's worth mentioning: your custom CSS must come after Bootstrap's CSS in the <head> section. This way, later styles override earlier ones when selectors have equal specificity:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Quick Pro Tip #

Avoid using !important unless you absolutely have to—it messes with the natural CSS specificity hierarchy and makes future maintenance harder. Instead, use your browser's DevTools (F12) to inspect the navbar link element, see which styles are being applied, and adjust your selector to match or exceed that specificity.

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