选择器的层叠和特殊性
对于同一个元素，可能会有多个规则，为了解决规则之间的冲突，CSS 会利用 层叠 给每个规则分配一个重要度：
1、标有 !important 的用户样式
2、标有 !important 的作者样式
3、作者样式
4、用户样式
5、浏览器/用户代理应用的样式
层叠优先级依次降低，优先级相同的规则，后定义的规则优先。为了计算规则的特殊性，可以给每种选择器分配一个数值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。
对于一个选择器，其特殊性分为4个成分等级：a, b, c 和 d
1、如果样式是行内样式，那么a=1
2、b是ID选择器的个数
3、c是类、伪类和属性选择器的个数
4、d是类型/标签选择器和伪元素选择器的个数
通配符和继承得到的CSS属性对特殊性没有影响。看一个 demo：选择器规则
h2的最终颜色是灰色的，从规则的特殊性分析一下(从左至右依次是abcd的值)
选择器 特殊性 以10为基数的特殊性 #content div#main-content h2 0,2,0,2 202 #content #main-content>h2 0,2,0,1 201 body #content div[id=’main-content’] h2 0,1,1,3 113 #main-content div.news-story h2 0,1,1,2 112 #main-content [class=’news-story’] h2 0,1,1,1 111 div#main-content div.news-story h2.first-child 0,1,2,3 123从上表可知，第一个选择器的特殊性最高，所以h2的颜色最终为灰色(gray)。
一篇文章：How CSS Specificity Works
外边距叠加
当块元素的 Top 和 Bottom 外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，称为 Margin Collapsing（Margin 塌陷）。
Margin Collapsing 基于三种情况：
1、上下相邻的块元素
上一个块元素出现在另一个块元素之上时，如果设置了 margin，二者的 margin-bottom 和 margin-top 会发生叠加：
Demo
2、父元素和第一个或最后一个子元素
如果父块元素和第一个子元素之间没有边框、内边距、内联内容和 间距 分开，若设置了 margin，则二者的 margin-top 会叠加；或者父块元素和最后一个子元素之间没有边框、内边距、内联内容和高度设置(height/min-height/max-height)，若设置了 margin，则二者的 margin-bottom 会叠加。
Demo
可以给父元素增加 border、设置 padding、填充内容等方式来解决，还可以通过 overflow:hidden 来解决：
/**填充内容**/
margin-top
查看更多关于《精通CSS》阅读备忘_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110655