Bootstrap 自定义 CSS 特异性不覆盖品牌形象

Question

好的，所以我是初学者，但我已经阅读了大量关于这种情况的信息。但我正在尝试将我的品牌形象放在我的导航栏中。

我知道这将是一件愚蠢而渺小的事情。我总是可以覆盖 HTML 中的样式，但我更愿意在自定义 css 文件中完成。

首先，把显而易见的事情排除在外。我的自定义 CSS 文件是在头部声明的最后一个 CSS。我能够修改页面上的其他元素，例如段落元素颜色，因此我知道 CSS 文件已正确链接。我理解特异性，至少是它的核心概念。

尝试解决特异性问题。我首先在我声明的标签和我编写的 CSS 文件中为我的 so 制作了一个自定义 id

#logo {
    height: 110%;
}

什么都没有。所以我尝试更具体一些，并添加每个可能指向徽标文件的类声明。

#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand {
...
}

再次没有运气。我只尝试了 .navbar-brand 和每个类的组合。我只是不明白等级制度和谁优先。我的 CSS 文件，如果在标题中最后列出，带有正确指定的类声明应该覆盖任何引导程序的代码。

我知道这个问题一定会被问到很多，但经过数小时的搜索后，我在任何地方都没有找到它。

段的html sn-p

<div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">
        <img id="logo" src="images/logo.png" alt="Limit Magazine">
    </a>
</div>

Answer 1

问题是您以百分比指定高度，这需要定义父元素的高度。在 Bootstrap 3 中，.navbar-brand 的父元素是div.navbar-header，它没有定义的高度。因此，height: 110%; 不起作用。因此，您需要以像素为单位定义徽标的高度或以百分比定义它并以像素为单位定义div.navbar-header 高度。