Yeoman + AngularJS + Bootstrap - CSS 优先级/顺序答案

【问题标题】：Yeoman + AngularJS + Bootstrap - CSS Priority/OrderYeoman + AngularJS + Bootstrap - CSS 优先级/顺序
【发布时间】：2014-05-14 14:53:16
【问题描述】：

在使用 Yeoman 使用 Bootstrap 构建 AngularJS 项目时，我看到为了覆盖 Yeoman 生成的 main.css 文件中的一些 bootstrap 的 CSS 类，我必须使用 !important，否则来自 bootstrap.css 的样式是获胜并被应用的那个。这对我来说似乎很奇怪 - 我认为应该使用“本地”main.css 文件来覆盖样式是有道理的，因此它应该“获胜”。

例如，我在 main.css 文件的顶部添加了以下内容：

.navbar-text {
    color: red;
}

index.html中的相关部分：

<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

但它没有被应用，因为 bootstrap.css 中的样式获胜。

拥有始终比 bootstrap.css 更高优先级的我自己的 CSS 文件的正确方法是什么？为什么不像 yeoman/generator-angular 那样开箱即用？

【问题讨论】：

确保你自己的 CSS 在 bootstrap 之后声明。默认情况下最后一个获胜。
是（index.html是yeoman自动生成的）
请在您的帖子中显示 index.html 文件
编辑并添加了 index.html 中的 sn-p

标签： css angularjs twitter-bootstrap yeoman

【解决方案1】：

覆盖属性时必须非常精确。

Bootstrap 将 .navbar-text 类声明为 .navbar-default 的一部分。
navbar.less 代码摘录，由bootstrap.less 导入：

// Default navbar
.navbar-default {
  background-color: @navbar-default-bg;
  border-color: @navbar-default-border;

  .navbar-brand {
    color: @navbar-default-brand-color;
    &:hover,
    &:focus {
      color: @navbar-default-brand-hover-color;
      background-color: @navbar-default-brand-hover-bg;
    }
  }

  .navbar-text {  //inside navbar-default
    color: @navbar-default-color;
  }

因此，您应该像这样覆盖：

.navbar-default .navbar-text {
  color: red;
}

以下内容不匹配：

.navbar-text {
    color: red;
}

当属性特定于特定媒体时，同样适用。您应该将该属性覆盖为位于 SAME 媒体中。

@media (min-width: 768px){
  .myClass {color: red}
}

不会被just覆盖：

.myClass{color: blue}

但通过：

@media (min-width: 768px){
  .myClass {color: blue}
}

【讨论】：

【解决方案2】：

我强烈推荐 css-tricks http://css-tricks.com/specifics-on-css-specificity/ 撰写的这篇关于 css 选择器优先级和顺序的精彩文章。

【讨论】：