如何针对引导Navbar（v4.5）的HTML元素使用CSS定制样式

我很难找到用CSS定位引导Navbar（v4.5）元素的方法。如果可能的话，我想要一个方法来确定正确的目标路径。例如，对于以下HTML导航栏，我如何定位导航栏品牌和导航链接：

为什么要针对这些元素？浏览器检查是查看应用了哪些规则以及尝试css覆盖的一种非常好的方法

但是，我不建议您直接修改引导代码，您应该创建自己的scss文件，导入所需的引导scss文件，然后交付带有覆盖规则的定制css

例如：_common.scss 在我的

\u custom\u bootstrap.scss

中，我只导入引导组件和行为，以减少网站每个页面生成的css

不要忘记那些被转换成css的

因此，您的示例：

.navbar light.navbar nav.show>.nav link、.navbar light.navbar nav.active>.nav link、.navbar light.navbar nav.nav-link.show、.navbar light.navbar nav.nav link.active

相当于下面的scss（这是一个示例）：

但是，可以使用嵌套规则或不使用嵌套规则覆盖这些规则，并应用样式

.nav-link{
    color:blue;
}

但这取决于您是否希望为每个元素应用规则，包括或不包括包装父元素

.navbar-light{
    // Some styling rules for the navbar
    .navbar-nav{
        // Some styling rules for .navbar-nav wrapped by .navbar-light
        .show, .active{
        // Some styling rules for items with show or active class
            & > .nav-link{
            // Some styling rules for .nav-link wrapped by .navbar-nav within .navbar-light with show or active
            }
        }
        .nav-link{
        // Some styling rules for .nav-link wrapped by .navbar-nav which is wrapped .navbar-light
            &.show, &.active{
            // Some styling rules for ... .nav-link WITH show or active classes 
            }
        }
    }
}

.nav-link{
    color:blue;
}