CSS学习之样式继承(Inheritance)和优先级 - CSS: The Missing Manual

• 子元素会继承所有父元素的属性。但有特例情况，如border属性不会被继承。

• 属性继承规则

  • 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before、unicode-bidi
  • 所有元素可继承：visibility和cursor。
  • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
  • 块状元素可继承：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承：border-collapse
• 属性继承的特殊情况
  
  • 影响元素的位置的属性及margins、背景颜色、borders属性不会被继承
  • 浏览器为某些标签继承了一些特定的属性，例如链接是蓝色的等，首先去清除这些浏览器原有样式是一个常见的做法
  • 当样式冲突时，规则如下：
    
    1. 浏览器缺省设置 < 外部样式 < 内部样式表(head标签内部) < 内联样式( HTML 元素内部)
    2. id选择器 > class选择器 > 标签选择器;
    3. 一个标签有多个id或多个class的时候，对前面那个的css定义优先。
       例： < div id=”a” id=”b”> #a{…} #b{…} 此时样式为#a定义的样式
    4. 选择器的权值如下图
       
       例如 .main p 和 p.intro 的权值都为11，当权值不同时，取权值大的样式，当权值相同时，取在后面定义的样式。
• 在样式表最开头清除所有默认样式（CSS reset）

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{
 display: block;
}

body 
{
 line-height: 1.2;
}
ol 
{
 padding-left: 1.4em;
 list-style: decimal;
}

ul 
{
 padding-left: 1.4em
 list-style: square;
}

table 
{
 border-collapse: collapse;
 border-spacing: 0;
}