概述：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; }
注意：多个伪类可以一起使用。