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。

二、选择器

未完待续...

Bootstrap的优先级和选择器

标签：

原文地址：http://www.cnblogs.com/mycifeng/p/5895502.html