CSS - 样式继承与覆盖

样式继承（分类）

• 文本相关属性

  font-family, font-size, font-style,
  font-variant, font-weight, font, letter-spacing,
  line-height, text-align, text-indent, texttransform,word-spacing

font-size是比较特殊的，他可以按相对值进行继承。这个特性会广泛应用于响应式设计相关的屏幕适配技术。

• 列表相关属性

  list-style-image, list-style-position,
  list-style-type, list-style

• 还有一个color属性

注： 不需要记住所有的，用的时候现查就可以了。当然你得记住几个重要分类。

样式覆盖

• 根据引用方式确定优先级
  优先级依次提高：外部链接 < 写在style标签里 < 内联属性

  也就是“内联属性”里的会覆盖前面两种，“写在style标签里”的会覆盖写在外部文件里，用“外部链接”引进来的。
  如果在同一个级别里，几乎只有一个规则，后写的覆盖先写的。

  栗子：

  //这是写在外部文件里的
  h1 { color: #ffffff;}

  //这是写在html里的
   
   
  
  
   
      
我的颜色到底是啥？
  

最后看到的颜色是#123456,因为内联属性设置的值优先级最高，所以覆盖了前面。

• 后写覆盖先写
  栗子：

    //这是写在外部文件style.css里的
    h1 { color: #ffffff;}
    h1 { color: #dddadd;}
    //这是写在html里的
     
          
    
     
      
我的颜色到底是啥？
    

#dddadd最后为#dddadd 因为后写的会覆盖先写的，几乎所有的解释型语言都是这样的.

• 选择器优先级
  CSS的样式覆盖，在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜

元素选择器： 1
类选择起器： 10
ID选择器： 100
内联选择器： 1000

栗子：

    //HTMl部分：
  

         
这里是Abstract
 
        
这里是普通的
  

   //CSS部分：
  #content p { color: red}
  .abstract { color: black;}

p的color最后为red.因为#content p 的权值是101， .abstract的权值是10

• important

  在样式上加了important，前面所有的规则都忽略 加了important的代码样子如下：

    p { color: white !important;}

栗子：

   // HTMl部分：
  

     
这里是Abstract
     
这里是普通的
  

 //CSS部分：
   #content p { color: red}
   .abstract { color: black !important;}

p的color属性为black， 因为.abstract里设置的color属性标记为 !important了。所它忽视一切的规则。