Question

我已经学习了几个月的CSS，我也在尝试使用bootstrap构建一个练习网站。我已经选择了一个导航栏，想要编写页面链接，根据当前打开的页面来改变颜色。我这样做是通过为每个名为“activePage”的链接创建一个类，并在我的自定义styles.css中为该类编写一个CSS选择器

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a class="activePage" href="index.html">News</a></li>
                    <li><a href="tour-dates.html">Tour Dates</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="discography.html">Discography</a></li>
                    <li><a href="other-media.html">Other Media</a></li>
                </ul>
                <div align = "right" class="social">
                    <ul>
                        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-github"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
                    </ul>


                </div>

            </div><!-- /.navbar-collapse -->

正如您在HTML页面中看到的，我在nabber上有一个名为“activePage”的活动页面上的课程

现在我有

a.activePage {
color:blue;
}

作为CSS规则，但没有任何显示。这是奇怪的事情当我点击inspect元素看看什么CSS规则应用于链接我得到了这个。

http://imgur.com/85REHsw

它表示a.activePage是最具体的选择器，但由于某种原因，文本的颜色由bootstrap.css中的.navbar-inverse .navbar-nav＆gt; li＆gt; a确定。为什么会这样呢？如果我的CSS知识是正确的（并且很可能不是），那些选择器应该只直接在div中生成内容，我创建的自定义类中的内容应该覆盖那些选择器。为什么不发生？

顺便说一下，我尝试在整个样式表中移动CSS选择器，我尝试过指定li.activePage。我已经尝试将它放在bootstrap.css中（它不是样式表本身，其他规则已经正确应用）似乎有一些我在这里不理解的东西。

Answer 1

您的样式表应按此顺序链接：

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

Answer 2

考虑特异性

这是由CSS Specificify Rules引起的，它决定了样式如何定位某些元素，以及如何在它们之间解决有关冲突的决策。

正在应用于元素的Bootstrap样式更具体地描述了它所针对的元素，如多重嵌套所示：

.navbar-inverse .navbar-nav li a {
    color: #9d9d9d;
}

这比您目前使用的广泛风格更具体：

a.activePage {
    color: blue;
}

覆盖的可能方法

有几种方法可以确保您的样式正确覆盖现有的Bootstrap：

确保您的样式是在Bootstrap引用后定义的（如果不使用下面的!important选项，这非常重要）
让您的风格更具针对性（例如.navbar-inverse .navbar-nav li a.activePage）
考虑在您的样式中使用!important修饰符，以便为您的样式优先。

您可以非常轻松地解决此问题，以确保您希望使用!important修饰符应用您的样式：

/* Example using a more specific style */
.navbar-inverse .navbar-nav li a.activePage {
   color: blue;
}

/* Example using the !important modifier */
a.activePage {
    color: blue!important;
}

我无法理解为什么我的引导程序自定义CSS被覆盖

2 个答案: