1.5 CSS基本语法
本节主要介绍Bootstrap里用到的CSS语法，以便在源码分析时更容易理解和学习，如果仅是为了使用Bootstrap框架（而非进行完整的源码分析，以便开发各种CSS和JS插件）的话，则可以忽略本节。但本节的语法都是比较基础的，巩固一下有好处。
Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都很常见，所以就不做单独说明了，只列举一下Bootstrap用到的知识点。
1.5.1 优先级
如何确定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选择器有同样的优先级，在样式表中后面的那个起作用。
下面有几个例子和对应的优先级，如表1-3所示。
表1-3 选择器和所对应的优先级
同理，计算下面两个选择器的优先级：
#leftbar li#first { color: red; }
#leftbar li:first-child{ color: blue; }
结果肯定是第1个比第2个优先级高，因为第1个的优先级是0，2，0，1，而第2个是0，1，0，2。
1.5.2 选择器
每一条CSS样式的定义都由两部分组成，形式如下：选择器{样式}。在{}之前的部分就是“选择器”。“选择器”指明了应用这些“样式”的网页元素。
1.属性选择器
Bootstrap的CSS组件里使用了很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种用法，表1-4列出了这些用法的区别。
表1-4 常见属性选择器用法
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;
}
1.5.3 伪类
CSS3提供了非常多的可用伪类，但是Bootstrap只用了常用的几个，这里我们只简单列一下常用的伪类和其对应的意思，具体如表1-5所示。
表1-5 CSS3中常见伪类
举个例子，按钮组里，除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式的按钮都不能设置圆角。我们应该这么定义：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
注意
多个伪类可以一起使用。
1.5.4 display属性
这个属性用于定义建立布局时元素生成的框的类型。对于HTML等文档类型，如果使用display时不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。表1-6是display支持的常见属性值和意义。
表1-6 display的场景属性值和意义
1.5.5 媒体查询
媒体查询是进行响应式设计的核心要素，其功能非常强大。这里我们只列出Bootstrap用到的功能，具体可以访问http://www.w3.org/TR/css3-mediaqueries/进行查看。
Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。示例如下：
@media (max-width: 767px) {
/*在小于768像素的屏幕里,这里的样式才生效*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*在768和991像素之间的屏幕里,这里的样式才生效*/
}
@media (min-width: 992px) and (max-width: 1199px) {
/*在992和1199像素之间的屏幕里,这里的样式才生效*/
}
@media (min-width: 1200px) {
/*在大于1200像素的屏幕里,这里的样式才生效*/
}