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

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

表1-1 选择器和所对应的优先级

选择器	优先级
#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样式的定义都有两部分组成，形式如下：选择器{样式}。在{}之前的部分就是"选择器"。"选择器"指明了应用这些"样式"的网页元素。

1. 属性选择器

　　　 Bootstarp的CSS组件里使用了很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种用法，下面列出了这些用法的区别：

表1-2 常见属性选择器用法

选择器	用法
[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只用了常用的几个，这里我们只简单列一下常用的伪类和其对应的意思，具体看表说话：

表1-3 CSS3中常见伪类

属性	描述
: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;  
}

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