概述：Bootstrap的CSS元件的核心就是選擇器的定義以及在各自優先順序上的處理。由於大部分的選擇器都非常的常見就一筆帶過了，這裡重點介紹一下Bootstrap用到的知識點。

一、優先順序

之前我們使用CSS的時候知道樣式有三種，分別是行內樣式、內嵌樣式、外部樣式，它們的優先順序是 行內>內嵌>外部。

OK，現在我們將Bootstarp的優先順序，如何確定CSS的優先順序？這裡我們要先引入一個機制，分別用4個數字（a,b,c,d）表示優先順序組合，

比如1,1,1,1和0,1,0,1。它們的意思分別是：

1. 第一個數字（a）表示style屬性，優先順序最高。由於一般都是class樣式，所以該值一般都是0。
2. 第二個數字（b）表示該css選擇器上的id數量的總和，一般都是1個。
3. 第三個數字（c）是用在改css選擇器上的其他屬性css選擇器以及偽類的總和。這個裡包括class（.btn）和屬性css選擇器（比如li[id=red]）。
4. 第四個數字（d）計算元素（就像table、p、div等）和偽元素（就像first-child等）。
5. 通用css選擇器（*）是0優先順序。
6. 如果兩個CSS選擇器有同樣的優先順序，在樣式表中後面的那個起作用。

下面有幾個例子和對應的優先順序，看錶說話：

同理，計算下面兩個選擇器的優先順序：

#leftbar li#first { color:red}

#leftbar li:first-child{ color:blue}

結果肯定是第1個比第2個優先順序高，因為第1個優先順序是0,2,0,1，而第2個是0,1,0,2。

二、選擇器

每一條CSS樣式的定義都有兩部分組成，形式如下：選擇器{樣式}。在{}之前的部分就是"選擇器"。"選擇器"指明瞭應用這些"樣式"的網頁元素。

1. 屬性選擇器

　　　 Bootstarp的CSS元件裡使用了很多屬性選擇器，比如[data-toggle^=button]、[data-toggle=toggle]等。屬性選擇器有多種用法，下面列出了這些用法的區別：

　　2.子選擇器

　　   CSS裡的子元素用符號">"表示。如下例項是表示擁有table樣式的表格，其thead元素內的tr元素如果有th的話，則應用該樣式

.table > thead > tr > th {
　 vertical-align:bottom;
　　border-bottom:2px solid #dddddd;
}

　　3.兄弟選擇器

　　 　兄弟元素分為兩種，一種是臨近兄弟，一種是普通兄弟。臨近兄弟的選擇符用"+" 表示。比如導航條裡要設定兩個li之間的外邊距，則需要如下定義：

.nav-pills > li + li {
  margin-left:2px;  /*加大左外邊距*/
}

　　　　如果只想查詢某一個指定元素後面的兄弟節點（而不限制於臨近節點），可以使用普通兄弟節點的符號"~"。比如：

.article h1 ~ p {
  font-size:13px;  
}

三、偽類

　　CSS提供了非常多的可用偽類，但是Bootstrap只用了常用的幾個，這裡我們只簡單列一下常用的偽類和其對應的意思，具體看錶說話：

舉個例子，按鈕組裡，除第一個按鈕、最後一個按鈕和帶有dropdown-toggle樣式的元素外，其他btn樣式的按鈕都不能設定圓角。使用如下程式碼：

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){
  border-radius:0;  
}

注意：多個偽類可以一起使用。