首页 > 代码库 > Bootstrap的优先级和选择器

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选择器有同样的优先级,在样式表中后面的那个起作用。

下面有几个例子和对应的优先级,看表说话:

选择器和所对应的优先级
选择器优先级   
#menu h20,1,01
h2.titile0,0,1,1
h2+p0,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。

二、选择器

未完待续...

 

Bootstrap的优先级和选择器