Ändern Sie die Hintergrundfarbe der aktiven Registerkarten

Verwendung von Bootstrap v2.3.2, ich versuche, ändern Sie die Standard-Hintergrundfarbe des aktiven tabs. Ich habe es versucht wie unten, aber es funktioniert nicht:

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
    color: #555555;
    background-color: red;  
}

Irgendwelche Ratschläge, warum dies nicht funktioniert, oder wie man es beheben?

InformationsquelleAutor der Frage DavidX | 2013-08-02

  1. 30

    In der Bootstrap v2.3.2-CSS-Datei, die CSS-Datei wird wie folgt für das snippet:

            .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus {
          color: #555555;
          cursor: default;
          background-color: #ffffff;
          border: 1px solid #dddddd;
          border-bottom-color: transparent;
          }

    Vergleichen Sie dieses CSS-snippet wie Sie sehen können, Sie vermissen den li Selektor vor .active - Selektor.
    Dein CSS ist korrekt, aber es funktioniert nicht, wie die Besonderheit in der Bootstrap-CSS ist mehr.
    So Einfach ändern Sie Ihren code-snippet, um durch Erhöhung der Spezifität:

            .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus{
            color: #555555;
            background-color: red;  
        }

    Nun Ihren browser beim Rendern der Seite wählen Sie Ihre CSS-snippet.
    Sie können sehen, ein Beispiel hier: http://jsfiddle.net/yyPrg/

    Lesen Sie auf CSS-Spezifität hier:
    http://css-tricks.com/specifics-on-css-specificity/
    und hier:
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    InformationsquelleAutor der Antwort Gloria

Schreibe einen Kommentar