使用Bootstrap修改导航栏文字颜色：仅右侧生效左侧无效求助

嘿，这种Bootstrap样式优先级“打架”的问题我可太熟了！你说只有右侧Logout能变白，左侧不行，大概率是CSS选择器优先级不够或者默认样式覆盖了你的自定义规则，咱们一步步排查解决：

1. 先确认CSS加载顺序是否正确 #

你现在的header.php里先加载Bootstrap、再加载mediaqueries.css的顺序是对的（自定义CSS必须在框架CSS之后，才能覆盖默认样式），但要确保你的颜色修改规则是写在mediaqueries.css或后续加载的自定义样式文件中，别写在Bootstrap之前哦。

2. 用更具体的选择器覆盖默认样式 #

Bootstrap的导航栏元素有自带的样式规则，比如左侧的品牌文字（.navbar-brand）或者普通导航项，可能被更具体的默认选择器（比如.navbar-light .navbar-brand）覆盖了。你可以试试用更精准的选择器来指定颜色：

/* 覆盖导航栏所有文字为白色，包括左侧品牌和右侧链接 */
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: #ffffff;
}

/* 可选：加上hover状态的颜色优化 */
.navbar .navbar-brand:hover,
.navbar .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

如果还是没生效，先临时加!important测试（确认是优先级问题）：

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
}

生效后再去掉!important，换成更具体的选择器（比如给导航栏加个自定义类.custom-navbar，然后写.custom-navbar .navbar-brand），尽量别依赖!important。

3. 用浏览器开发者工具排查冲突 #

按F12打开开发者工具，选中左侧的文字元素，在「Elements」面板的「Styles」标签里查看color属性的生效规则——你会看到哪个默认样式（比如Bootstrap的规则）把你的颜色覆盖了，然后写一个比它优先级更高的选择器就行。

举个实际场景的例子：如果你的导航栏用了.navbar-light类但背景是深色，Bootstrap默认会把文字设为深色，这时候你需要针对性覆盖：

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: #ffffff;
}

4. 检查是否有其他CSS文件干扰 #

比如你引入的select2样式一般不会影响导航栏，但可以排查下mediaqueries.css里有没有针对导航栏左侧元素的特殊规则，不小心把颜色又改回去了。

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