跳到主要内容

层叠, 优先级和继承

层叠​

基础​

层叠​
  • css 规则发生冲突时;
  • 如何解决冲突;
机制​
  • 样式表的来源;
  • 选择器优先级;
  • 源码顺序;

机制

样式表的来源​

样式表种类​
  • 浏览器默认 style sheet;
  • 用户 style sheet;
  • 第三方 style sheet;
  • 第三方 style sheet 中的 !important 声明;
  • 用户 style sheet 中的 !important 声明;
  • 浏览器默认 style sheet 中的 !important 声明;
!important​
  • 无视特殊性和优先级;
  • 强行将 !important 对应的样式;
  • 设置为标签样式;
#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

优先级​

选择器优先级​
  • Identifiers + Classes + Elements;
    • Identifiers: ID 选择器;
    • Classes: 类选择器, 属性选择器, 伪类;
    • Element: 元素选择器, 伪元素选择器;
  • 越大优先级越高;
选择器IdentifiersClassesElements特殊性
h1001001
p.class010010
h1 + p[class]011011
#id100100

经验法则​

经验法则​
  • 不要使用 id;
  • 不要使用 !important;

继承​

基础​

继承​
  • 子标签继承父标签的属性;
可继承属性和不可继承属性​
  • 可继承属性: 样式;
    • font 相关;
    • color 相关;
    • text 相关;
    • list 相关;
  • 不可继承属性: 布局, 尺寸;
    • 盒子模型相关;
    • position 相关;
    • float 相关;
    • display 相关;

特殊值​

inherit​
  • 表明子标签使用父标签对应样式
#sidebar h2 {
  color: inherit;
}
initial​
  • 表明子标签使用浏览器默认值;
#sidebar h2 {
  color: initial;
}
其他属性​
  • unset;
  • revert;
  • all;

简写属性​

简写属性​
  • 同时给多个属性复制的属性;
font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;
简写属性会默默覆盖其他样式​
  • 简写属性隐式设置省略值;
  • 可能覆盖其他样式定义的值;
理解简写属性的顺序​
  • 简写属性尽量无视顺序;
  • 上下左右;
    • 1: 全部;
    • 2: 上下, 左右;
    • 3: 上, 左右, 下;
    • 4: 上, 下, 左, 右;
  • 水平竖直: 水平, 竖直;