当使用Yeoman使用Bootstrap构建AngularJS项目时,我看到为了覆盖Yeoman生成的main.css文件中的一些bootstrap的CSS类,我必须使用!important
,否则来自bootstrap.css的样式是获胜并应用的样式。
这对我来说似乎很奇怪 - 我认为"本地" main.css文件应该用于覆盖样式,因此它应该" win"。
例如,我在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开箱即用?
答案 0 :(得分:2)
覆盖属性时必须严格精确。
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}
}
答案 1 :(得分:0)
我强烈推荐css-tricks http://css-tricks.com/specifics-on-css-specificity/关于css选择器优先级和顺序的精彩文章。