CSS BOX(2)

#1 选择器

关于伪类 IE bug：

IE6 只注意用语锚链接的:active和:hover选择器，完全忽略:focus
IE7在任何元素上都支持:hover，但是忽略:active和:focus

几个高级选择器：
- 子选择器 nav>li
  
  后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。
  
  IE7+支持，但有一个bug：如果父元素和子元素之间有HTML注释，就会出问题。
  
  IE6-只能使用通用选择器模拟
- 相邻同胞选择器 h2 + p
  
  同一个父元素下某一个元素之后的一个元素。
  
  同上，如目标元素之间有注释，IE7有bug同上。
- 属性选择器
```
acronym[titlle]  /*  根据属性是否存在 */
a[rel="nofollow"] /* 根据属性值，允许根据属性之一寻找元素 *／
```

#2 层叠和特殊性（从上至下降低）

层叠的重要度次序(从上至下降低)

1.标有!important的用户样式

2.标有!important的作者样式

3.作者样式

4.用户样式

5.浏览器／用户代理应用的样式
然后，根据选择器的特殊性决定规则的次序。

更特殊的优先。

相同特殊性的规则后定义的优先。
特殊性：

每种选择器分配一个数字值，将规则的每个选择器的值加在一起。注意，并非简单的十进制的数字相加。可以简单理解为如下abcd为千百十个位。

4个成分等级：a b c d
- 行内样式 a = 1
- b = ID选择器的总数
- c = 类、伪类和属性选择器的数量
- d = 类型选择器和伪元素选择器的数量
基本上，（从上到下降低）
- style属性编写的样式
- 具有ID选择器的规则
- 具有类选择器的规则
- 只有类型选择器的规则
- 后定义的规则
如果出现了特殊性冲突，可以在选择器中添加它的父元素ID，从而提高它的特殊性。

#3 维护样式表

在平常要注意编写可维护的代码。比如对代码有好的结构规划、内容组织等。

对文档应用文档的三种方式：

<link href="" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
@import url("/css/style.css")
-->
</style>

还可以从另一个样式表导入一个样式表中
```
@import url(/css/layout.css);
```

CSS代码的结构可以像下面这样设计：

一般性样式
- 主体样式
- reset样式
- 链接
- 标题
- 其他元素
辅助样式
- 表单
- 通知和错误
- 一致的条目
页面结构
- 标题、页脚和导航
- 布局
- 其他页面结构元素
页面组建
- 各个页面
覆盖

使用风格统一的大注释块分隔每个部分(可以在注释中加入开始、结束标志)。

/* @group general styles
----------------------------------------------------------*/

/* @group helper styles
----------------------------------------------------------*/

还可以在代码中加入关键字来提示自己。比如@todo @bugfix等等。

大型的项目最好编写一个样式指南。