CSS 声明冲突和继承

css中的声明冲突和继承

• 声明冲突：同一个样式，多次应用到同一个元素
• 层叠：解决声明冲突的过程，游览器自动处理（权重处理）

1. 比较重要性

• 重要性从高到低：

作者样式表：开发者书写的样式

1）作者样式表中的！important样式
2）作者样式表中的普通样式
3）游览器默认样式表中的样式

2. 比较重要性

• 看选择器
• 总体规则：选择器选中的范围越窄越特殊
• 具体规则：通过选择器，计算出一个四位数（xxxx）

1. 千位：如果是内联样式，计1，否则计0
2. 百位：将选择器中所有ID选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、微元素选择器

3. 比较源次序

• 代码书写靠后的胜出，覆盖前者

应用

1. 重置样式表

• 书写一些作者样式，覆盖游览器的默认样式
• 重置样式表 - > 游览器的默认样式
• 常见的重置样式表：normlize.css、reset.css、meyer.css

2. 爱恨法则

• link>visited>hover>active

继承

• 子元素会继承父元素的某些CSS属性
• 通常，跟文字内容相关的属性都能被继承

inrherit 继承属性

• color:intherit:强制继承父元素颜色