精通CSS：高级Web标准解决方案（第二版） 初读笔记

2.1 常用的选择器

1. 类型选择器  p { color: black; }

2. 后代选择器  blockquote p { padding-left: 2em; }

3. ID选择器  #intro { font-weight: bold; }

4. 类选择器  .date-posted { color: #cccccc; }

5. 伪类  a:link { color: blue; }

6. 通用选择器  * { padding: 0; }

7. 子选择器  #nav>li { padding-left: 20px; }

8. 相邻同胞选择器   h1+p{ font-size: 1.4em; }

相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素；

9. 属性选择器   

可以根据某个属性是否存在寻找元素:  arconym[title] { border-bottom: 1px dotted #999; }

也可以根据属性的值来寻找元素：a[rel="nofollow"] { padding- right: 20px; }

如果有多个属性值，可以这样: a[rel~="co-worker"] { padding-left: 20px; }

2.3.3 层叠和特殊性

（1）层叠的重要度次序

• 标有!important的用户样式。
• 标有!important的作者样式。
• 作者样式。
• 用户样式。
• 浏览器/用户代理应用的样式。

（2）规则的特殊性计算。

选择器的特殊性分成4个成分等级: a、b、c和d;

• 如果样式是行内样式，那么a=1。
• b等于ID选择器的总数。
• c等于类、伪类和属性选择器的数量。
• d等于类型选择器和伪元素选择器的数量。

如果两个规则的特殊性相同，那么后定义的规则优先。

2.3.4 继承

直接应用于元素的任何样式会覆盖继承而来的样式。这是因为继承而来的样式的特殊性为空。

Firebug是一个方便的Firefox附加组件，可以用它检查各个元素，查明他们的样式来源。

2.4.1 对代码应用样式

1. 设计代码的结构  

• 一般性样式(@group general styles)
• 辅助样式(@group helper styles)
• 页面结构(@group page structure)
• 页面组件(@group page components)
• 覆盖(@group overrides)

2. 自我提示

gotcha: 使用@todo来表示某些东西需要在以后进行修改、修复或复查。用@bugfix表示代码或特定浏览器遇到的问题。用@workaround来表示并不完善的权宜之计。

3.1 盒模型概述

1. 当一个元素包含在另一个元素中(假设没有内边距或边框将外边距隔开)，他们的顶和/或底外边距也会发生叠加。

2. 假设有一个空元素，他有外边距，但是没有边框或内边距。在这种情况下，顶外边距和底外边距就碰到了一起，他们会发生叠加。

3. 外边距叠加的重要意义：以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加，段落之间的空间是页面顶部的两倍。如果发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就一致了。

4. 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。