关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的?
CSS层叠样式表的关键在于”层叠“,会根据选择符的使用而将样式相互叠加或者覆盖。
CSS样式表之所有有”层叠”的概念,因为有多个样式来源,不同样式设置来源不同权重,
优先顺序为:1到5权重依次降低
1 |
HTML标签头内的样式 (不建议使用,结构样式分离) |
2 |
<style>中编写的样式代码 (适合不常更新或很少访问的页面) |
3 |
<link>引用的css文件 (推荐使用,方便维护,合理开发) |
4 |
用户自定义浏览器样式 |
5 |
浏览器默认样式 |
叠加:浏览器会把所有来源的样式叠加到一起,把各个零散的整合成一个整体。
覆盖:如果多个来源样式有相同样式,根据权重值,高权重样式覆盖低权重样式——特殊情况:具有!important修饰的样式有最高权重。