1.1核心：html负责结构，css负责样式，js负责行为；

css写在head标签里，容器style标签；
基本结构：选择器{样式}

2. 选择器

2.1 标签选择器

就是用标签名来当作选择器；

• 所有标签都能当作选择器；比如body,h1,dl,ul,span等；
• 标签选择器，选择的是所有的该标签；而不是某一个；所以是共性，不是特性；
• 用法：比如重置样式，希望所有的a链接都没有下划线

a{
      /*去掉下划线：*/
    text-decoration: none; 
}

2.2 id选择器

• 表示选择id;

• 任何标签都可以有id，id的名字要以字母开头，可以有数字，下划线；大小要严格区分，也就是说mm和MM是两个不同的id;
• 同一个页面中的id不能重复，所以id是唯一性的；

2.4 类选择器

• .就是类的符号。类的英语叫做class。
• 所谓类，就是标签的class属性，每个标签都可以有class属性，class是可以重复的，id是不能重复的；
• 同一个标签可以有多个类，但必须写在一个class属性名下；例如：
  <h3 class="qianduan quanzhan">我是一个h3啊</h3>；
• 不要试图用一个类名，把某个标签的所有样式都写完，这个标签要多携带几个类，共同造成这个标签的样式；
• 这个类要尽可能的小，有公共的，一定要抽离出来；

2.5 id和class的使用场景

• class名一般用来设置样式，id用来元素的获取（在JS中讲）

3. CSS高级选择器

3.1 后代选择器

<style type="text/css">
.div1 p{
    color:red;
}
</style>

• “空格”表示后代，但这个后代包含子子孙孙；
• 使用场景：如果想对某部分设置样式，可以用后代选择器；

3.2 交集选择器

h3.special{
    color:red;
}

• 选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
• 注意：交集选择器没有空格；
• 思考：“h3.special” 和 “h3 .special”意思一样吗？

3.3 并集选择器（分组选择器）

h3,li{
    color:red;3
}

• 用逗号表示并集选择器；

3.4 通配符*

*{
    color:red;
}

• * 表示所有元素
• 效率并不高，如果页面上元素越多，效率越低，所以，尽量不要用；(但学JS时，为了快速开发，可以使用，但要知道这并不规范)

4. 一些CSS3选择器

4.1 兼容问题介绍

• 浏览器的兼容问题，主要出现在IE6，IE7身上，这两个浏览器时非常低级的浏览器；
• 浏览器的市场占有率：
  • Chrome 40.7%
  • IE8 13.89%
  • IE9 7.12%
    (JS部分，我们主要解决IE7及以上兼容问题；)
    html5浏览器打分：
    

4.2 儿子选择器>

• IE7开始兼容，IE6不兼容。
• 只能选儿子；

4.3 序选择器

• IE8开始兼容，IE6，7不兼容；
• 例如，选择第一个li

ul li:first-child{
  color:red;
}

选择最后一个li

ul li:last-child{
  color:red;
}

4.4 下一个兄弟选择器

• IE7+兼容；
• +表示选择下一个兄弟

h3+p{
    color:red;
}

所有CSS3选择器，放在html5+css3课上讲；

5. CSS的继承性和层叠性

5.1 继承性

• 有些属性，当给自己设置的时候，自己的后代都继承上了；这就是继承；
• 哪些属性能继承？color text-开头的 line-开头的 font-开头的
• 关于文字样式的都能继承，关于盒子的，定位的，布局的属性都不能继承；
• 继承是从自己开始，直到最小的元素；

5.2 层叠性

• 当选择器选择上元素的时候，按照(id数，类数，标签数)来计权重，谁大听谁的；如果都一样以后写的为准；
• 如果元素没有被选中，那么全中为0；

6. 复习

• 下列都是IE6兼容的选择器：

p  标签选择器    #box  id选择器
.spec 类
div.box 交集选择器
div .box 后代选择器
div , .box 并集选择器
* 通配符选择器

• 下列都是IE7开始兼容：

div>p
div+p

• 下列都是IE8开始兼容：

div p:first-child
div p:last-child

继承性：继承从上到下，哪些能？哪些不能？
层叠性：冲突，多个选择器描述了同一个属性，听谁的？