1 选择器的权重
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突 。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定 。
1.1选择器的权重
内联样式 1,0,0,0(1000)
id选择器 0,1,0,0(100)
类和伪类选择器 0,0,1,0(10)
元素选择器 0,0,0,1(1)
通配选择器 0,0,0,0(0)
样式的继承 没有优先级
1.1.1 内联样式优先级高于id选择器优先级
分析：行内样式的背景颜色为黄色，类选择器（bc）的背景颜色为红色，因为行内样式优先级高于类选择器，所以背景颜色以行内样式为标准 。
1.1.2 id选择器高于类选择器
分析：id选择器（box）背景颜色为蓝色，类选择器背景颜色为红色，因为id选择器的优先级高于类选择器优先级，所以以id选择器的样式为标准，结果为蓝色 。
1.1.3 类选择器优先级高于元素选择器优先级
分析：类选择器（bc）的背景颜色为红色，元素选择器（div）的背景颜色为巧克力色，因为类选择器优先级高于元素选择器优先级，所以以类选择器为标准，结果为红色 。
1.1.4 元素选择器优先级高于通配选择器优先级
分析：元素选择器（div）的字体颜色为红色，通配选择器的字体颜色为蓝色，因为元素选择器优先级高于通配选择器优先级，所以以元素选择器为标准，结果为红色字体 。
1.1.5 通配选择器优先级高于样式的继承优先级
通配选择器的字体为50px，元素选择器（div）的字体为20px，因为通配选择器优先级高于样式的继承优先级，所以div的字体以元素选择器为标准，div中的span元素以通配选择器为标准 。
1.2 选择器的选择
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的） 。
分析：类选择器（bc2）为10，类选择器（bc）10，id选择器（box）100，.bc#box为110，所以采用红色字体 。
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器 。

文章插图
类选择器有11个，则权重为110，id选择器为100，因为类选择器再高也不会超过id选择器，所以还是采用id选择器的样式，结果为红色字体 。
如果优先级计算后结果相同，则优先使用靠下的样式 。
分析：bc和bc2为类选择器，bc2在下方，所以以bc2类选择器为标准，最后结果字体为蓝色 。
1.3 !（最高优先级）
可以在某一个样式的后边添加!，则此时该样式会获取到最高的优先级，超过内联样式，但在开发中尽量不使用! 。
分析：原则上id选择器优先级比类选择器优先级高，但类选择器（bc）样式中有!，则类选择器（bc）为最高优先级 。
2 像素和百分比 2.1 像素
屏幕（显示器）是由一个一个的小点构成的 。不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同设备下显示效果是不一样的 。
2.2 百分比
将属性值设置为其相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变 。
当然可以写成像素的格式：
.box2{width: 150px;height: 150px;background-color: red;}
3 em和rem 3.1 em
em是相对于元素的字体大小来计算的1em=1font-size
分析：30em=30*10px=300px
3.2 rem
rem是相对根元素的字体大小计算的 。
根元素的 font-size为10px 。
html{font-size: 10px;}

• 上一页
• 1
• 2
• 下一页

• 关于开通微信商户平台后，设置api开发密钥,以及与小程序进行绑定的详细流程！
• 轻量级自动化测试框架的开发
• 开发环境搭建 Java基础 开发相关的介绍和准备
• ECC OpenCV 项目开发实战--对图像进行对齐
• Android怎么开发自己底层的NuPlayer音视频播放器框架
• FPGA开发之算法开发 system Generator
• 【unity项目实战】3DRPG游戏开发03—— 绘制low poly风格的场景
• RK3588 ArmSoM-W3开发板 之 USB摄像头图像预览
• 博客大咖收藏录
• 小程序第三方平台开发代替客户各类小程序批量操作