CSS IN DEPTH

1 层叠、优先级和继承

css本质即声明规则

css基本原理：层叠、盒模型、可用的各种单位模型

1.1 层叠

1.1.1 依据层叠规则解决冲突

1）样式表的来源

• 作者！important > 作者 > 用户代理（浏览器默认）

2）选择器优先级

• 行内样式：

  直接作用，无选择器

  非 “ ！important “ 行内样式可被 “ ！important “ 样式表覆盖

• 选择器样式

优先级： id选择器（数量） > 类选择器/伪类(:hover)/属性([type=”input”])（数量） > 标签选择器（数量）

• 开发通常先使优先级尽可能低，方便后续样式覆盖

3）源码顺序

• 声明来源和优先级相同，较晚引入样式表有效

• 链接样式顺序：LoVeHAte（link、visited、hover、active）

1.1.2 经验法则：

• 不使用id选择器和 “！important” ；分写样式表

1.2 继承

• 无层叠值元素属性可能继承祖先元素值

1.3 特殊值

1.3.1 inherit

• 继承父元素以覆盖层叠值

• 强制继承常规非继承属性（border、margin等）

1.3.2 initial

-