ブートストラップのテーブルストライプの色を、あまり適用しないで上書きしようとしていますか？

Question

ブートストラップのテーブルを継承する私のLESSファイルに共通のCSSクラスを作成しようとしています。私はデフォルトを取る場合、それはうまく動作しますが、私はストライプ行の色を変更したいと思います。いくつかの研究をして、うまくいくはずのコードを見つけましたが、それは適用されません。実際には、デフォルトのBootstrap .table-stripedを上書きしていて、通常の白い背景色も表示しません。

.vtc-table{ 
    .table; 
    .table-condensed; 
    .table-bordered; 
    .table-hover; 
    .table-striped > tbody > tr:nth-child(odd) > td { 
     background-color: antiquewhite; 
    } 
    th { 
     background-color: #2FA4E7; 
     color: white; 
    } 
} 

私はテーブルレベルで共通クラスを呼び出しています。 @makshhこのの助けに

<table class="vtc-table"> 

UPDATE

グレートおかげで私たちが働いていたことを思い付いたものを最終的にあります。これはテーブル全体と行/セルの境界線を追加し、行の主な色を白に設定し、antiquewhiteで「奇妙な」行に色付けします。うまくいけば、これは誰かにも役立ちます。

.vtc-table { 
    border: 1px solid #ddd; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > tbody > tr > th, 
.vtc-table > tfoot > tr > th, 
.vtc-table > thead > tr > td, 
.vtc-table > tbody > tr > td, 
.vtc-table > tfoot > tr > td { 
    border: 1px solid #ddd; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > thead > tr > td { 
    border-bottom-width: 2px; 
} 
.vtc-table > tbody > tr { 
    background-color: white; 
} 
.vtc-table > tbody > tr:nth-of-type(odd) { 
    background-color: #fcf8e3; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > tbody > tr > th, 
.vtc-table > tfoot > tr > th { 
    background-color: #2FA4E7; 
    color: white; 
} 

そして、それはHTMLでこのように呼ばれています。

<table class="table vtc-table"> 

Answer 1

1. table-stripedクラスは、tableのdiv（あなたが&を使用する必要があります）に追加する必要があります。
2. ストライプテーブルの適切なセレクタは.table-striped > tbody > tr:nth-of-type(odd)です。
3. thを変更する場合は、低い特異性を避けるために、さまざまなセレクタを使用する必要があります。

.vtc-table { 
    .table; 
    .table-condensed; 
    .table-bordered; 
    .table-hover; 
    &.table-striped > tbody > tr:nth-of-type(odd) { 
    background-color: antiquewhite; 
    } 
    > thead > tr > th, 
    > tbody > tr > th, 
    > tfoot > tr > th { 
    background-color: #2FA4E7; 
    color: white; 
    } 
}