这里主要介绍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:;

}

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)">

CSS基本语法的更多相关文章

  1. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  2. 1.css的语法标准

    css(Cascading Style Sheets),中文名称为层叠样式表,主要用于对html的样式设置. 在使用CSS的时候,要注意其优先级情况,优先级由下所示(数字越高,优先级越高): 浏览器缺 ...

  3. 常用的CSS缩写语法一些方法小结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  4. CSS代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到 ...

  5. css 基本语法及页面引用：

    css基本语法: css的定义方法是: 选择器{ 属性:值; 属性:值; 属性:值; } 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值. 如: div{ w ...

  6. css基本语法及页面引用

    css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ w ...

  7. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  8. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  9. HTML&CSS基础-CSS的语法

    HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...

  10. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

随机推荐

  1. android代码嵌入html代码

    有时候需要在一个TextView控件中设置两种不同颜色的字体,这时候可以使用Html.fromHtml方法实现 例如: tvTaskDesc.setText(Html.fromHtml("当 ...

  2. Druid（准）实时分析统计数据库——列存储+高效压缩

    Druid是一个开源的.分布式的.列存储系统,特别适用于大数据上的(准)实时分析统计.且具有较好的稳定性(Highly Available). 其相对比较轻量级,文档非常完善,也比较容易上手. Dru ...

  3. SQL SERVER CURSOR游标的使用(转载)

    一:认识游标 游标(Cursor)它使用户可逐行访问由SQL Server返回的结果集. 使用游标(cursor)的一个主要的原因就是把集合操作转换成单个记录处理方式. 用SQL语言从数据库中检索数据 ...

  4. OC方法和文件编译

    OC方法和文件编译 一.OC方法 (一)对象方法 (1)对象方法以-开头如 -(void)xx; (2)对象方法只能又对象来调用 (3)对象方法中可以访问当前对象的成员变量 (4)调用格式   [对象 ...

  5. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  6. [强连通分量] POJ 2762 Going from u to v or from v to u?

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17089 ...

  7. Java类文件最大限制

    今天在往一个jsp文件里添加代码时,项目跑起来访问这个jsp时报错.. The code of method _jspService(HttpServletRequest, HttpServletRe ...

  8. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  9. PL/SQL工具连接ORALCE数据库的方法

    http://www.cnblogs.com/dongzhiquan/archive/2011/11/21/2257629.html 1.利用ORACLE NET MANAGER工具 1)打开 ORA ...

  10. Xcode 设置 ARC&MRC混用

    如果你的项目使用的非 ARC 模式,则为 ARC 模式的代码文件加入 -fobjc-arc 标签.如果你的项目使用的是 ARC 模式,则为非 ARC 模式的代码文件加入 -fno-objc-arc 标 ...