CSS样式优先级和权重问题(部分)

2018-06-24 02:13:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

内联样式: <div style="font-size: 12px;">姓名</div>


外部样式: <link rel="stylesheet" href="css/bootstrap.min.css" />


内嵌样式 : <style>
                           .name{
                               font-size: 12px;;
                           }
                  </style>


jquery书写样式:$('#name').css('font-size','12px');


id选择器: <div id="name">姓名</div>


class选择器:<div class="name">姓名</div>


一般情况下,优先级问题:

jquery书写样式 > 内联样式 > 外部样式;

id选择器 > class选择器 ; id一般作为数据传输,样式的话尽量使用class;

在html页面中,程序是自上至下执行的,执行晚的优先级高,如果外部样式先执行,内嵌样式后执行,则内嵌样式 > 外部样式

权重问题:

元素,伪元素:                                            +1                          p{font-size:12px;} 直接写p标签的样式

类,伪类,属性:                                         +10                        class选择器

ID:                                                            +100                      id选择器

内联样式:                                                   +1000                    内联样式

用代码(js,jquery)书写的样式:                 +较高                    $('#name').css('font-size','12px');

!important :                                            +最高                     p{font-size: 20px !important;};  

例如以下样式:

p {}                        p为元素                                           总权重就是:1

div p{}                   p与div都是元素                                 总权重是:1=1=2

.div p{}                  .div是类,p是元素                             总权重是:10+1=11

.div .class_p{}         .div是类 .class_p是p元素的class          总权重是:10+10=20

先写这么多!

!important :    这个较为特殊,只要写在样式后边  font-size: 20px !important;   那这个样式的权重最高。

 

感谢yy_68的指正~

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:从CUMT校园导航出现的问题看CSS布局设计(一) CSS盒模型

下一篇:常用css