概述：Bootstrap的CSS組件的核心就是選擇器的定義以及在各自優先級上的處理。由於大部分的選擇器都非常的常見就一筆帶過了，這里重點介紹一下Bootstrap用到的知識點。
一、優先級
之前我們使用CSS的時候知道樣式有三種，分別是行內樣式、內嵌樣式、外部樣式，它們的優先級是 行內>內嵌>外部。
OK，現在我們將Bootstarp的優先級，如何確定CSS的優先級？這里我們要先引入一個機制，分別用4個數字（a,b,c,d）表示優先級組合，
比如1,1,1,1和0,1,0,1。它們的意思分別是：
- 第一個數字（a）表示style屬性，優先級最高。由於一般都是class樣式，所以該值一般都是0。
- 第二個數字（b）表示該css選擇器上的id數量的總和，一般都是1個。
- 第三個數字（c）是用在改css選擇器上的其他屬性css選擇器以及偽類的總和。這個里包括class（.btn）和屬性css選擇器（比如li[id=red]）。
- 第四個數字（d）計算元素（就像table、p、div等）和偽元素（就像first-child等）。
- 通用css選擇器（*）是0優先級。
- 如果兩個CSS選擇器有同樣的優先級，在樣式表中后面的那個起作用。
下面有幾個例子和對應的優先級，看表說話：
| 選擇器 | 優先級 |
| #menu h2 | 0,1,01 |
| h2.titile | 0,0,1,1 |
| h2+p | 0,0,0,2 |
同理，計算下面兩個選擇器的優先級：
#leftbar li#first { color:red}
#leftbar li:first-child{ color:blue}
結果肯定是第1個比第2個優先級高，因為第1個優先級是0,2,0,1，而第2個是0,1,0,2。
二、選擇器
每一條CSS樣式的定義都有兩部分組成，形式如下：選擇器{樣式}。在{}之前的部分就是"選擇器"。"選擇器"指明了應用這些"樣式"的網頁元素。
- 屬性選擇器
Bootstarp的CSS組件里使用了很多屬性選擇器，比如[data-toggle^=button]、[data-toggle=toggle]等。屬性選擇器有多種用法，下面列出了這些用法的區別：
| 選擇器 | 用法 |
| [att=value] | 該屬性有指定的確切值 |
| [att~=value] | 該屬性值必須是多個用空格隔開的值，比如,class="title featured home"，而且這些值中的一個必須是指定的值"value" |
| [att|=value] | 屬性的值就是"value"或則以"value"開始並立即跟上一個"-"字符，也就是"value-"，比如lang="zh-cn" |
| [att^=value] | 該屬性的值必須以指定的值開始 |
| [att$=value] | 該屬性的值必須以特定值結束 |
| [att*=value] | 該屬性的值必須包含特定值（而無論其位置怎么樣） |
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只用了常用的幾個，這里我們只簡單列一下常用的偽類和其對應的意思，具體看表說話：
| 屬性 | 描述 |
| :hover | 鼠標滑過時的狀態 |
| :focus | 元素擁有焦點時的狀態 |
| :first-child | 指定某一個元素的第一個子元素 |
| :last-child | 指定某一個元素的最后一個子元素 |
| :nth-child() | 指定某個元素的一個或多個特定的子元素，可以傳入數字，也可以傳入even（偶數）或odd（奇數） |
舉個例子，按鈕組里，除第一個按鈕、最后一個按鈕和帶有dropdown-toggle樣式的元素外，其他btn樣式的按鈕都不能設置圓角。使用如下代碼：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){ border-radius:0; }
注意：多個偽類可以一起使用。