CSS特殊性、重叠
2015-08-10 14:00
495 查看
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
如下面代码:
p{color:red;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。如下代码:
p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面
相关文章推荐
- 进入做Mvc项目的时候 返现某个文件夹下面css js png等静态文件都访问不了
- CSS里的pointer-events属性
- js+css3动态时钟-------Day66
- CSS3动画详解
- 改变复选框显示样式
- html页面的CSS、DIV命名规则
- CSS圆角,输入框提示信息,JS查找同级元素
- 让文本框和按钮在同一水平线上
- CSS的几个属性display,float,clear,overflow,visibility
- 一个好看的样式,datagriview
- CSS垂直居中的方法
- CSS 父级方法清除浮动方法
- 利用css样式画各种图形--初步、进阶、高级(一)
- 如何解决IE6下的双倍margin问题
- CSS3实现的一批hover特效
- 刷新页面后怎样让hover样式停留不消失
- css浮动
- 如何在XHTML文档中加入CSS
- CSS 进阶篇
- CSS3 transform.html