web-dev-qa-db-ja.com

アクティブなタブの背景色を変更する

Bootstrap v2.3.2を使用して、アクティブなタブのデフォルトの背景色を変更しようとしています。以下のように設定しようとしましたが、機能しません。

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

なぜこれが機能しないのか、それを修正する方法についてのアドバイスはありますか？

twitter-bootstraptabsbackground-color
18
DavidX

Bootstrap v2.3.2 CSSファイルでは、スニペットのCSSは次のとおりです。

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

ご覧のとおり、これをCSSスニペットと比較すると、.activeセレクターの前にliセレクターがありません。 CSSは正しいですが、Bootstrap CSSの特異性がより高いため、機能しません。そのため、特異性を高めてコードスニペットを変更します。

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

これで、ブラウザはページをレンダリングするときにCSSスニペットを選択します。ここに例を見ることができます： http://jsfiddle.net/yyPrg/

CSSの特異性については、こちらをご覧ください： http://css-tricks.com/specifics-on-css-specificity/ およびこちら： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know /

30
Gloria