Override Bootstrap Accordion colors in bootstrap for angularjs

问题

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.

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.

.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 :/

回答1:

You should use scss in this case.

<div class="custom">
    <accordion>
        ...
    </accordion>
</div>

In css you will need to define.

.custom {
    .panel-heading: {
        background-color: red !important;
     }
}

回答2:

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

.panel-default >.panel-heading {
    background-color: red;
}

Here is the JSFiddle for reference.

回答3:

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.

.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.

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:

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.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)

来源：https://stackoverflow.com/questions/26985812/override-bootstrap-accordion-colors-in-bootstrap-for-angularjs

标签

angularjs

twitter-bootstrap

accordion