Question

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

例如，我在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的样式获胜。

拥有自己的CSS文件的正确方法是什么，它总是会比bootstrap.css获得更高的优先级？为什么它不喜欢与yeoman / generator-angular开箱即用？

Answer 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}
}

不会被以下方式覆盖：

.myClass{color: blue}

但是：

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

Answer 2

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

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

2 个答案: