杰瑞教育

最新动态NEWS
您当前的位置:首页 > 最新动态

你真的知道css的优先级吗?

| 查看次数:684次

凡是做前端开发的,想必都知道css样式的优先级,如果我现在让你回答,你肯定会说出一个标准答案来:行内样式>内部样式>外部样式

但是这个答案也仅仅是个答案罢了。真正在实际使用过程中你会发现,这个标准答案有时也会让你挠头感到纳闷。下面我简单介绍一下隐藏在css优先级下面的一些不为人知的秘密,当然,前端大神的话直接忽略就可以了。我把话题抛出来,算是抛砖引玉吧。

刚才已经说了,css优先级的顺序为行内样式大于内部样式,内部样式大于外部样式,也就是经常提到的就近原则。但是这里也有一个小例外,那就是外部样式在内部样式的后面引入。如果你把外部样式在内部样式后面引入,你会发现相同类名或者ID定义的样式,行外的优先级是高于行内的,这就归因于浏览器加载css样式的时候是顺序加载的,放在后面的样式会覆盖前面的。其实这个也可以用就近原则来解释,谁离标签近,谁生效嘛。

示例如下:

这时候,外部样式文件中设置的字体颜色会生效。

其实,css样式和引入的顺序有直接关系之外,还和css选择器的优先权有直接关系。废话不多少,先上一个图:

C:\Users\Administrator\Desktop\jerehedu.png

看到图大家应该能理解什么意思了,我下面跟点css样式代码,在简单给大家介绍一下上面图片什么意思。

根据上图给的权值,通过权值计算,得到针对em标签的两个样式权值,分别为111103。权值越大,样式的优先级越高。这时候就近原则已经无法解释了。这就是css权值计算带来的改变。

其实除了样文件的引入顺序和样式权值可以改变样式的优先级以外,还有另外一个大家可能会接触到的更改css样式的关键字。那就是!important。如果你在使用一个框架,发现某一个样式总是覆盖不掉。又或者你定义了一个样式,想拥有最终的控制权,怕被别人的样式覆盖掉。那就检查或者使用!important吧,用它修饰的样式拥有最高的控制权。

示例如下:

关于前端样式的学习,这仅仅是皮毛而已,希望大家相互学习,相互交流。

杰瑞教育旗下:SAP 新版官网 营业执照

捷瑞数字 版权所有Copyright © 2014 All rights reserved [鲁ICP备09041295号] 管理员登陆

培训课程
JAVA专区
ANDROID专区
IOS专区
动画设计专区
就业播报
就业进行时
合作企业
学员风采
精彩活动
成长故事
话题分享
我的团队
技术分享
面试题分享
UI
JAVA
ANDROID
IOS
HTML5
源码分享
首页
免费视频
关于我们
常见问题
联系我们