精通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. 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
