首页 > 代码库 > 理解css属性的继承和覆盖

理解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;}这样 这个属性将凌驾于一切而在页面上显示出来。