Bootstrap的优先级、选择器、伪类详解编程语言

概述：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;   
}

注意：多个伪类可以一起使用。