您现在的位置是:网站首页> 编程资料编程资料
css样式优先级及层叠的顺序排序探讨_心得技巧_网页制作_
2021-09-12
988人已围观
简介 css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢,这个问题貌似一直存在我们身边却一直无从选择,接下来用实例为大家说明下,到底哪个高点,感兴趣的你可不要错过了哈
一般情况下:
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
!important > [ id > class > tag ]
使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
先来看下!important 这个诡异的东西
除了IE6,其他浏览器都会显示背景为红色,正是!important的作用,意思就是只要我在这里我就是最重要的啦,任何东西都不能取代我,没看见都是一个 !外加一个英文单词 important 吗?很形象,很贴切了。IE6这里会显示背景为蓝色,并不是IE6不支持!important,而是它会按照样式声明顺序后出现的覆盖前面的,此时它已经不认识!important了,它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色:
再来看下4位特殊性标志 [0.0.0.0]
从左至右,每次给某一个位置+1,前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。
1,内联样式 [1.0.0.0]
A:
B:还有就是JS控制的内联样式style对象,document.getElementById("demo").style.color="red";
这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,元素标签,伪元素 选择器 [0.0.0.1]
关于CSS选择器可以查看W3C或者CSS的手册,不
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
!important > [ id > class > tag ]
使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
先来看下!important 这个诡异的东西
复制代码
代码如下:除了IE6,其他浏览器都会显示背景为红色,正是!important的作用,意思就是只要我在这里我就是最重要的啦,任何东西都不能取代我,没看见都是一个 !外加一个英文单词 important 吗?很形象,很贴切了。IE6这里会显示背景为蓝色,并不是IE6不支持!important,而是它会按照样式声明顺序后出现的覆盖前面的,此时它已经不认识!important了,它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色:
复制代码
代码如下:再来看下4位特殊性标志 [0.0.0.0]
从左至右,每次给某一个位置+1,前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。
1,内联样式 [1.0.0.0]
A:
B:还有就是JS控制的内联样式style对象,document.getElementById("demo").style.color="red";
这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,元素标签,伪元素 选择器 [0.0.0.1]
关于CSS选择器可以查看W3C或者CSS的手册,不
相关内容
- 网页上播放mp3或flash等播放器代码_心得技巧_网页制作_
- 获得css元素中的计算样式(层叠之后/最终样式)_心得技巧_网页制作_
- 网页加载时左右跳动原因分析及解决方法_心得技巧_网页制作_
- 网页设计中的6个小技巧分享_心得技巧_网页制作_
- 使用字符代替图片实现圆角或尖角效果研究_心得技巧_网页制作_
- css元素隐藏原理及display:none和visibility:hidden_心得技巧_网页制作_
- 去掉a标签和按钮加背景图片虚线/阴影完美解决方案_心得技巧_网页制作_
- 网页图片优化工具及使用技巧分享_心得技巧_网页制作_
- IE6/7下a.getAttribute(href,2)的问题分析及解决_心得技巧_网页制作_
- css float属性 图解float属性的点点滴滴_心得技巧_网页制作_
