CSS 顺序和选择

标签 css twitter-bootstrap

我正在尝试覆盖 Bootstrap 规范。我在 Bootstrap 文件之前有一个脚手架文件。但是,正在选择 Bootstrap 规范,提供白色而不是绿色。为什么会这样?

我了解到A标签有4个伪类:link、hover、active和visited。我只是在处理现实和 Bootstrap。

选择器是:

.navbar-inverse .navbar-nav > li > a:focus

组合的 CSS 文件按以下顺序包含这些相关规范:

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:active {
  color: green;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}

选择图片: enter image description here

感谢所有帮助。

最佳答案

这确实有道理,对吧?后一个规范覆盖第一个。您有两个选择:

  • 更改声明的顺序;
  • 使您的规范更具体(更具体的选择器,或者在万不得已时使用 !important)。

关于CSS 顺序和选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29451396/

相关文章:

angular - 使用 typescript (javascript)触发 ng-bootstrap Accordion 组件?

html - 两个导航栏在不同的行中。希望第二行停靠在顶部

twitter-bootstrap - Bootstrap Responsive Nav 默认打开

ruby-on-rails - wicked_pdf 在 css 文件中使用图像标签助手

html - For Each in rails html模式延续

jquery - 如何禁用下拉菜单?

html - CSS。如何使用 flex 居中显示宽度而不是可用空间的元素

html - <button> 需要角色 ="button"吗?

javascript - angular2 Bootstrap 动态轮播

javascript - 如何以平滑过渡而不是笨重的方式向图像添加类