twitter-bootstrap 在 angularjs 的引导程序中覆盖引导程序手风琴颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26985812/
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
Override Bootstrap Accordion colors in bootstrap for angularjs
提问by Justin
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
我是 angularjs/bootstrap 的新手，我正在尝试创建一个使用 bootstrap 手风琴列表的 SPA。我正在尝试更改整个手风琴选项卡的颜色，但是，它只更改了手风琴空间的一部分。我在网上查看了这个问题（使用 angualr ui bootstrap 将类添加到手风琴标题？）它是 Jsfiddle（http://jsfiddle.net/Zmhx5/3/）完美地代表了我的问题，但没有解释解决方案。
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
我尝试使用 firebug 找出幕后发生的事情，它说整个手风琴标签都是“”。我有一个覆盖该样式的 css 类，但由于某种原因，某些东西覆盖了它。
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
这个网站有一个关于手风琴的教程，它的 css 只是简单地覆盖了它（http://patternry.com/p=accordion/）。我试过做同样的事情，但没有用，请帮忙：/
采纳答案by Aditya Sethi
You should use scss in this case.
在这种情况下，您应该使用 scss。
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
在 css 中，您需要定义。
.custom {
.panel-heading: {
background-color: red !important;
}
}
回答by Bart Jedrocha
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
您的覆盖不起作用的原因是CSS Specificity。由于 Bootstrap 样式比您的样式更具体，因此它是正在应用的样式。您需要按如下方式覆盖
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddlefor reference.
这是JSFiddle供参考。
回答by Christine268
Since I couldn't add a comment to @AdityaSethi in @BartJedrocha's answer I will put an answer here since I think that it is useful.
由于我无法在@BartJedrocha 的回答中对@AdityaSethi 添加评论，因此我将在这里提供一个答案，因为我认为它很有用。
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
对我来说有效的地方
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
没有。也许是使用了SCSS？我在某处读到 SCSS 使用扩展名 .scss。我没有耐心改变我的样式表扩展或创建一个新的。Sooo 我尝试了第二个答案。
My comment however is more toward the @AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
然而，我的评论更倾向于@AdityaSethi 评论，该评论指出该解决方案影响整个应用程序的问题，因为面板类被广泛使用。可以理解。我认为解决这个问题的简单方法是：
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.customto the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.customshould be affected. :)
这对我来说很有用……就仍然改变风格而言。我的引导页面的其余部分一定没有使用其他面板，因为在我添加div.custom到 CSS之前没有其他任何更改。但我想，由于 CSS 中出现的逻辑很少，因此div.custom不应影响除此之外的其他面板。:)
