理解css属性的继承和覆盖

首先，我们梳理一下哪些属性会被继承

• 文本

• • color 颜色，a元素除外
  • direction 方向
  • font 字体
  • font-family 字体系列
  • font-style 字体风格
  • font-size 字体大小
  • font-weight 字体粗细
  • letter-spacing 字母间距
  • line-height 行高
  • text-align 对齐方式
  • text-indent 首行缩进量
  • text-transform 大小写修改
  • visibility 可见性
  • white-space 指定如何处理表格
  • word-spacing 字符间距

• 列表

  • list-style 列表样式
  • list-style-image 列表指定样式图片
  • list-style-position 列表标记的位置
  • list-style-type 列表标记的样式

• 表格

  • border-collapse 控制单元格内边距是否存在
  • border-spacing 指定表格边距之间的空隙大小
  • caption-siede 指定表格标题的位置
  • empty-cells 指定是否显示i表格中的空单元格

• 页面设置

  • orphans 指定当元素内部发生分页时在页面底部需要保留的最小行数
  • page-break-inside 设置元素内部的分页形式
  • windows 设置当元素内部发生分页是在页面顶部需要保留的最少行数

• 其他

  • cursor 鼠标指针
  • quotes 指定引号样式

然后我们讨论一下，当规则发生冲突时：如何处理‘层叠’问题

• 先考虑选择器优先级

  • 标签选择器1
  • 类选择器10
  • id选择器100
  • 复合选择器以最后的部分为主

• 再寻找是否存在‘! important‘

　　如果为了避免其他属性的覆盖和影响，可以声明一条特殊的规则来覆盖一切，具体方法是这样的：如 p{ color：orange !important;}这样 这个属性将凌驾于一切而在页面上显示出来。

理解css属性的继承和覆盖