如何在Bootstrap3中覆盖样式？求助修改.navbar-nav链接行高

嘿，我来帮你搞定这个样式覆盖的问题！你的思路是对的——通过给body加自定义类来隔离自定义样式，但选择器的写法有点小问题，导致样式没生效。下面是正确的实现步骤：

1. 确保样式文件的加载顺序 #

首先要保证你的Site.css是在bootstrap.css之后加载的，因为CSS遵循“后加载的样式会覆盖先加载的同优先级样式”规则。如果顺序反了，即使选择器正确，Bootstrap的默认样式也会盖过你的自定义样式。

2. 修正CSS选择器 #

你原来写的.bsoverride.navbar-nav > li > a是在找同时拥有bsoverride和navbar-nav两个类的元素，但实际上bsoverride在body上，navbar-nav是body的后代元素（比如nav里的ul），所以需要用后代选择器（加空格）来指定：

.bsoverride .navbar-nav > li > a {
    line-height: 29px;
}

这个选择器的意思是：找到所有在拥有bsoverride类的元素（也就是body）内部的.navbar-nav下的li > a元素，设置它的行高。

3. 优先级不足时的备选方案 #

如果上面的写法还是没生效，可能是Bootstrap的选择器优先级比你的高（比如它可能用了更具体的层级），这时可以适当提高自定义样式的优先级，比如多增加一层父元素选择，或者临时用!important（尽量少用，避免样式混乱）：

/* 增加层级提高优先级 */
.bsoverride nav .navbar-nav > li > a {
    line-height: 29px;
}

/* 万不得已时用!important */
.bsoverride .navbar-nav > li > a {
    line-height: 29px !important;
}

按照这个方法修改后，你的自定义行高应该就能正常覆盖Bootstrap的默认样式啦！

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