【Twitter Bootstrap 3】CSSの上書きができない

Twitter Bootstrap の CSSを上書きすることができなかった。
理由は、CSSセレクター適用優先順位の知識不足・・・。

CSSはセレクターを読み込む順番で何を適用させるかを決定する。
基本的に後で読み込まれたものが優先される。
というか、上書きされていく、

なので、今までは最後に自分のCSSファイルを読み込ませてた。
自分のCSSファイルを最後に読み込ませることで、
上書きされるだろうと・・・。

ところが、セレクター自体にも優先順位があり、
それによっては上書きされない。
セレクターではタグセレクターが強いらしい。

なので、以下のようなCSSの場合、.test のCSSは適用されない。

td {
    color:#000;
}
.test {
   color:#fff;
}

この場合は以下のようにする。

td {
    color:#000;
}
td.test {
   color:#fff;
}

Twitter Bootstrap のCSSを上書きするときは、
有効になっているCSSセレクターをそのまま抜き出して、
自分で任意の class or id を指定する。

以下は自分で .middle を追加した。
これで td + class="middle" では以下のCSSが適用される。

.table tbody>tr>td.middle {
    vertical-align:middle;
}