css权重

发布时间:2017-7-9 7:06:04编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"css权重 ",主要涉及到css权重 方面的内容,对于css权重 感兴趣的同学可以参考一下。

css权重

指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重

  a、!important 加在样式属性后,权重值为10000(慎用)

  b、内联样式(style=" ")权重值为1000

  c、ID选择器(#con)权重值为100

  d、类,伪类和属性选择器(.con , :hover , input[type='text'])权重值为10

  d、标签选择器和伪元素选择器(div 、:before)权重值为1

  e、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)权重值为0

css优先级:通用选择器<标签选择器<类选择器<ID选择器<内联样式<!important

权重的计算实例

  1、实例 

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css权重值</title> 6     <style> 7         div{ 8             /*权重值为10000*/ 9             color:red!important;10         }11         #box{12             /*权重值为100*/13             color:green;14         }15         .con{16             /*权重值为10*/17             color:gold;18         }19         div{20             /*权重值为1*/21             color:pink;22         }23         .box .con{24             /*权重值为20*/25             color:palevioletred;26         }27     </style>28 </head>29 <body class="box">30     <!--行内样式权重值为1000-->31     <div id="box" class="con" style="color:#374abe;">这是一个div元素</div>32 </body>33 </html>


上一篇:[翻译] 编写高性能 .NET 代码--第二章 GC -
下一篇:nohup 同时实现记录日志和屏幕输出

相关文章

关键词: css权重

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款