前端提高篇（三十三）CSS回顾

css文件中定义了很多次背景颜色：

body {

background-color: orange;

}

body {

background-color: blue;

}

body {

background-color: brown;

}

body {

ba 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ckground-color: blueviolet;

}

body {

background-color: greenyellow;

}

body {

background-color: white;

}

body {

background-color: red;

}

结果是内部样式的#ccc

如果把内部样式写在前面，外部样式不变：

结果是外部样式中的最后一个颜色：red

2.优先级与权重

通配符选择器 < 标签选择器 < 类型选择器class < id选择器<行间样式<!important

如果同时写id选择器和类型选择器来选择一个标签，如#first.one（中间没有空格），权重比单个使用要大

asdf

#first.one {

color: blue;

}

#first {

color: red;

}

运行效果：是蓝色的

所以，权重是可以叠加的

#first.one span的权重如果是100+10+1

span的权重是1

则前者的权重大，最终实现的样式以前者为主

asdf

#first.one span{

color: chartreuse;

}

span {

color:orange;

}

运行效果：是chartreuse的颜色

F12选中想看的元素，下方就会显示关于这个元素的样式，可以通过这个方法来看到底是哪个样式生效了，简洁明了

3.文档流与脱离文档流

文档流：从上到下，从左到右，块级元素占一整行