- 规则结构
每个规则都有两个基本部分组成：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性-值对。
- 元素选择器
- 声明和关键字
- 关键字一般由空格隔开；有一种情况例外 font属性中的 斜线（/）分割 元素的字体大小和行高两个关键字。
- 分组
- 选择器分组
- 通配选择器 （*）css2引入
- 声明分组
- 各个声明最后使用分号；
- 类选择器和ID选择器
- 类选择器
- 多类选择器
- 各个词之间用空格分隔
- 不同平台的Internet Explorer 处理不同
- 多类选择器
- ID选择器
- 属性选择器
- 简单属性选择器 h1[class]{color:silver;}
- 根据具体属性值选择
- h1#page-title和 h1[id="page-title"]的差别
- 根据部分属性值选择
- p[class~="warning"]{font-weight:bold;}
- p.warning 和 p[class~="warning"] 应用到HTML文档时是等价的。
- p[class~="warning"]{font-weight:bold;}
- 特定属性选择类型
- [att|="val"]
- *[lang|="en"]{color:white;} 这个规则会选择lang属性等于en或者以en-开头的所有元素。
- 使用文档结构
- 后代选择器（包含选择器或上下文选择器）
- 选择器之间的空格是一种结合符
- 从右向左读
- 选择子元素 子结合符（>）
- 选择相邻兄弟元素 （+）
windows平台的 Internet Explorer 在IE6 之前不支持子选择器和相邻兄弟选择器。IE7对两者则提供了支持
- 伪类和伪元素
- 伪类选择器 （：）把某种幻想类关联到与伪类相关的元素
- 链接伪类 :link 、:visited
- 动态伪类 :focus、:hover 、:active
-
-
- 伪类的顺序 link-visited-focus-hover-active
- windows 平台的Internet Explorer在ie6 之前只允许动态伪类选择超链接，而不允许选择其他元素。IE7支持对所有元素都能应用：hover，但是不支持对表单元素应用：foucs 样式
- 动态样式的实际问题
- 重绘文档
- 选择第一个子元素
- 使用另一个静态伪类 :first-child来选择元素的第一个桌子元素
- windows 平台的Internet Explorer在ie6 之前不支持 ：first-child，不过ie7支持
- 根据语言选择
- ：lang() 伪类（从对应模式上来讲 像是 |=属性选择器）
- 结合伪类
- a：hover：link :long(de)
- windows 平台的Internet Explorer在ie6 之前不能正确识别这种组合伪类 只会注意到组合伪类中的最后一个伪类；IE7不存在这种限制，它会正确处理这些组合伪类
- 伪元素选择器（）
- 设置首字母样式 ：first-letter
- 设置第一行样式 :first-line
css2.1 中 ：first-letter可应用于所有元素
-
- 设置之前和之后元素的样式
- :before h2:before{content:"}}";color:silver;}
- :after
- 设置之前和之后元素的样式
-