十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了css中权重值的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
我们提供的服务有:成都网站设计、网站制作、微信公众号开发、网站优化、网站认证、霸州ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的霸州网站制作公司css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码
猜猜我是什么颜色
•执行可结果
•小结 : 出现这种效果是因为浏览器是根据权重值来判断使用哪种css样式的,权重值高的它的优先级会越高,就会呈现那种css样式,id选择器的权重值为100>类选择器10>标签选择器1,所以最终结果为id选择器设置的样式
!DOCTYPE html>猜猜我是什么颜色
•执行结果
•小结 : 继承元素是没有权重值的,所以最终结果为通用选择器设置的样式
猜猜我是什么颜色
•执行结果
•小结 : 标签选择器的权重值是1,但是仍然大于通用选择器,所以最终结果为标签选择器设置的样式
猜猜我是什么颜色
•执行结果
猜猜我是什么颜色
•执行结果
权重值的计算
p{color:gray;} div div p{color:yellow;} .active{color:red;} div .active{color:black;} div div .active{color:blue;} .wrap #box2 .active{color:purple;} #box1 #box2 .active{color:green;} #box1 .wrap2 div{ color:red; } 注意:继承来的属性也有权重值,不过它的权值非常低,可以理解为继承的权重值最低。 !important 提升权重值实例MJJ
!important的使用 MJJ
•执行结果
•小结: 使用!important是一个坏习惯,应该尽量避免,因为这严重破坏了样式表中固有的权重值比较规则,使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签,那么拥有较大优先级的将会被采用。
什么情况下可以使用!important ?
•第一种
◦你的网站上有一个设计了全站样式的css文件
◦同时你或者你的小伙伴写了一些很差的内联样式
•第二种
box p { color: blue; } p.awesome { color: red; }
怎样才能使得文本的颜色变为红色?这种情况下,如果不适用!important.第一条规则永远大于第二条的规则。
总结:
感谢你能够认真阅读完这篇文章,希望小编分享的“css中权重值的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!