CSS基本语法
这里主要介绍Bootstrap里用到的CSS语法，以便在源码分析时更容易理解和学习。Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。
优先级
如何确定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)和属性选择器(比如li[id=red])
- 第四个数字（d）计算元素(就像table、p、div等)和伪元素(就像first-child等)
- 通用CSS选择器（*）是0优先级
- 如果两个CSS选择器有同样的优先级，在样式表后面的那个起作用。
计算下面两个选择器的优先级，结果肯定是第一个比第二个优先级高，因为第一个的优先级是0,2,0,1，而第二个是0,1,0,2。
#leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; }
选择器
每一条CSS样式的定义都是由两部分组成：选择器{样式}。在{}之前的部分就是“选择器”，指明了应用这些“样式”的网页元素。
1.上下文选择符
上下文选择符的格式：标签1 标签2{样式}，其中标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素的情况下才会被选中。上下文选择符，严格来讲叫做后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。
article p {font-weight:bold;}
<body> <article> <h1>Contextual selectors are <em>very</em> selective</h1> <p>This example shows how to target a <em>specific</em> tag.</p> </article> <aside> <p>Contextual selectors are <em>very</em> useful!</p> </aside> </body>
下面几个特殊选择器的示例代码
<section> <h2>An H2 Heading</h2> <p>This is paragraph 1</p> <p>Paragraph 2 has <a href="#">a link</a> in it.</p> <a href="#">Link</a> </section>
2.子选择器
CSS里的子元素用符号">"表示。标签1>标签2，标签2必须是标签1的子元素。
section > h2 {font-style:italic;}
3.临近兄弟选择器
临近的兄弟选择符用“+”表示，标签1+标签2，标签2必须紧跟其同胞标签1的后面。
h2 + p {font-variant:small-caps;}
4.普通兄弟选择器
标签1~标签2，与兄弟选择器不同的是，标签2在标签1后面，但不一定紧跟。
h2 ~ a {color:red;}
5.属性选择器
Bootstrap的CSS组件里有很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等，下表列出常见属性选择器的用法：
伪类
CSS3提供了非常多的可用伪类，但是Bootstrap只是用来常用的几个，具体如下表所示：
举个例子，按钮组里，除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式都不能设置圆角，多个伪类可以一起使用：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
display属性
这个属性用于定义建立布局时元素生成的框的类型。对于HTML等文档类型，如果使用display时不谨慎会很危险，因为可能违法HTML中已经定义的显示层次结构。
媒体查询
媒体查询是进行响应式设计的核心要素，其功能非常强大，具体可以访问：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像素的屏幕里,这里的样式才生效*/ }
或者
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 400px)">
