twitter-bootstrap 引导继承
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17833199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap inheritance
提问by chandings
I have never created or edited css.
我从未创建或编辑过 css。
Now I am using bootstrap and i want to use hero-unit in multiple scenario with different colors.
现在我正在使用引导程序，我想在具有不同颜色的多个场景中使用 hero-unit。
I really do not want to edit anything in original css. I want to just inherit hero-unit and make new class with a different color.
我真的不想在原始 css 中编辑任何内容。我只想继承 hero-unit 并使用不同的颜色创建新类。
Is it even possible?
甚至有可能吗？
回答by Lloyd
Yes, this isn't specific to Bootstrap but should give you a start on what you want. In your CSS do something like this:
是的，这不是 Bootstrap 特有的，而是应该让您开始了解您想要的。在你的 CSS 中做这样的事情：
/* Defined in bootstrap.css or wherever */
.hero-unit {
background-color: Black;
}
/* These are yours in your styles.css */
.hero-unit.red {
background-color: Red;
}
.hero-unit.green {
background-color: Green;
}
Then you can then do this in HTML:
然后，您可以在 HTML 中执行此操作：
<div class="hero-unit red"></div>
<div class="hero-unit green"></div>
You can play around with this example here on jsFiddle - http://jsfiddle.net/RrhyC/
你可以在 jsFiddle 上玩这个例子 - http://jsfiddle.net/RrhyC/
回答by Lou
This is an article about specificity and inheritance. http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
这是一篇关于特异性和继承的文章。 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
Essentially, there's a point system based on how specific you are in terms of which element you are styling. Definitions that have higher point count has attributes of higher priority, overwriting attributes of lower priority.
从本质上讲，有一个积分系统，它基于您在样式化哪个元素方面的具体程度。具有较高点数的定义具有较高优先级的属性，覆盖较低优先级的属性。
.carousel-indicators .active {
/*defined in bootstrap*/
}
.carousel-indicators .active {
/*my definitions are ignored because it's equal in points to
the one defined in bootstrap.*/
background-color: red;
}
The easy way to get your definitions to stick is to put them inline in your html,
使您的定义坚持下去的简单方法是将它们内联在您的 html 中，
<div class="carousel-indicators" style="background-color: red;">
Or to append "!important" to your properties so that they get higher priority.
或者将“！重要”附加到您的属性，以便它们获得更高的优先级。
.carousel-indicators .active {
background-color: red !important;
}
But they're generally considered bad practice.
但它们通常被认为是不好的做法。
So you can be more "specific" by applying more classes onto your div.
因此，您可以通过在 div 上应用更多类来更加“具体”。
In HTML:
在 HTML 中：
<div class="carousel-indicators custom">
<div class="active>
</div>
</div>
In CSS:
在 CSS 中：
.carousel-indicators.custom .active{
background-color: red;
}
This will inherit defined values from .carousel-indicators while giving values in .carousel-indicators.custom higher priority and preventing them from being overwritten.
这将从 .carousel-indicators 继承定义的值，同时赋予 .carousel-indicators.custom 中的值更高的优先级并防止它们被覆盖。
However, if you use in SCSS:
但是，如果您在 SCSS 中使用：
.carousel-indicators .custom .active {
background-color: red;
}
It will be looking for this target in HTML:
它将在 HTML 中寻找这个目标：
<div class="carousel-indicators">
<div class="custom">
<div class="active">
</div>
</div>
</div>
which might not be what you want.
这可能不是您想要的。
